@tangible/window

Tangible Window

This is a collection of modules exported under the global variable window.Tangible.

It's for convenience of client-side JavaScript, so they can import from @tangible/window for shared dependencies.

It can also be used for alias a module, for example, from React to Preact.

Enqueue

To use a JavaScript library registered by a Tangible module, pass its name as a dependency when enqueuing your script.

The following are currently availble:

• tangible-codemirror
• tangible-preact

For example:

wp_enqueue_script('script-name', $url, [ 'tangible-codemirror' ], $version);

This ensures that the library is loaded before the script that uses it.

Alias

Optionally, the module can be aliased when building.

In tangible.config.js, add the property alias to a task configuration. It's a key-value pair of the aliased module name and source.

module.exports = {
  build: [
    {
      task: 'js',
      src: 'assets/src/example.js',
      dest: 'assets/build/example.min.js',
      watch: 'assets/src/**/*.js',
      alias: {
        '@tangible/codemirror': '@tangible/window/codemirror'
      }
    },
  ]
}

In the above example, the script can import @tangible/codemirror to access window.Tangible.CodeMirror.

Preact

To use the Preact module, add an alias for react.

In tangible.config.js, define the property alias to a task configuration. It's a key-value pair of the aliased module name and source.

module.exports = {
  build: [
    {
      task: 'js',
      src: 'assets/src/example.js',
      dest: 'assets/build/example.min.js',
      watch: 'assets/src/**/*.js',
      alias: {
        'react': '@tangible/window/preact',
        'react-dom': '@tangible/window/preact',
      }
    },
  ]
}

When the script imports react or react-dom, it will use the shared instance of window.Tangible.Preact.