Skip to main content

Configuration

Drayman configuration can be managed inside drayman.config.js file.

Here is an example configuration with description and default values:

drayman.config.js
module.exports = {  // Folder where Drayman application source files are stored.  // It must contain `components` folder where Drayman components are placed.  srcDir: "src",  // Folder where Drayman will output compiled source files and components.  outDir: "dist",  // Folder where `index.html` is located.  publicDir: "public",  // Custom configuration for PostCSS.  postcss: {    // Source CSS file.    source: "src/styles.css",    // Destination CSS file.    destination: "public/styles.css",  },};

Drayman initialization#

Drayman initialization can be configured when executing initializeDraymanFramework() function which is by default located inside public/index.html file:

public/index.html
<!DOCTYPE html><html>  <head>    <meta charset="utf-8" />    <meta http-equiv="X-UA-Compatible" content="IE=edge" />    <title>Drayman Framework</title>    <meta name="viewport" content="width=device-width, initial-scale=1" />    <script src="/drayman-framework-client.js"></script>  </head>
  <body>    <drayman-element component="home"></drayman-element>
    <script>      initializeDraymanFramework();    </script>  </body></html>

This function accepts an object with some configurable options which are described below.

browserCommands#

public/index.html
...
<script>  initializeDraymanFramework({    browserCommands: () => ({      alert: async ({ text }) => {        alert(text);      },      getCurrentUrl: async () => {        return window.location.href;      },    }),  });</script>
...

Can be used to describe commands which are executed inside user browser. More detailed description of this functionality can be found here - The Browser object.

elementOptions#

Can be used to configure default behavior of elements. Contains dictionary which describes each element and it's attributes:

public/index.html
...
<script>  initializeDraymanFramework({    elementOptions: {      h3: { style: "color: red;" },      input: {        oninput: { debounce: 500 },      },    },  });</script>
...

Using this example will modify default behavior of elements:

  • All <h3> elements will have red text.
  • All <input> elements will be debounced by 500ms before data is sent to server.
tip

Element event configuration is described in detail here.