Possible to use namespaces in browser?

[robertromore]

Hi! I am trying to use twing-loader with storybookjs which is loading the browser version of Twing. I am trying to use the TwingSystemFilesystem loader to load my files in my environment file, but the browser version of Twing is returning TwingLoaderNull. The TwingSystemFilesystem class supports adding namespaces, but the TwingLoaderNull class doesn't.

I'm thinking the solution lies in this package, as this package is loading the files and parsing the include and extends functions.

Is there a way to do this currently?

[ericmorand]

It's not possible to use any of the filesystem loaders in the browser.

But I wonder why storybookjs is using the browser flavor of Twing? Do you have a project that you can share that I can have a look at?

[robertromore]

Sure! Here's a stripped down version of what I'm using: https://github.com/robertromore/twing-storybook-example.

[christianwiedemann]

Hi, any news here. Got the same problem.

[christianwiedemann]

I dig through the code to find out how to implement for namespaces browser support. For Twig.js there is a loader which is doing that by requiring all included files in the Webpack Loader and replaces the includes with the associated id. See here: (https://github.com/AmazeeLabs/twig-loader/blob/master/lib/compiler.js). Which is working quit well. @ericmorand Maybe you can give me a hint how would you implement that in Twing. I think I need an TwingLoader and I need some kind of logic inside the webpack loader which writes the the included files into a map so the TwingLoader can read from that map?
Or maybe we can use the WebLoader from PR #430 (NightlyCommit/twing#430) and just extend the twing-loader.
Would be great if you can give some thoughts about that.

[JohnAlbin]

But I wonder why storybookjs is using the browser flavor of Twing?

I think this might be the key.

Since we are all using the twing-loader in our Storybook config, what causes twing-loader to load the browser-only Twing when it does import { TwingEnvironment } from 'twing';? How do we control which flavor of Twing is loaded?

BTW, I'm using the updated .storybook config of the latest Storybook v6, but the JS file I'm loading in twing-loader's environmentModulePath option is identical to @robertromore's file above. https://github.com/robertromore/twing-storybook-example/blob/master/.storybook/environment.js and I'm seeing the exact same error when uncommenting the addPath() line.

[philwolstenholme]

@christianwiedemann @JohnAlbin (hi Drupal friends!) - did you find a solution or workaround for this?

[codebymikey]

@philwolstenholme

With a custom environment.js file, you can switch the loader behaviour dynamically. When it's on the node/webpack side, it does all the TwingLoaderFilesystem stuff, then on the frontend, it does nothing, but still has references to the files loaded from the filesystem.

// file: environment.js
const isNode = typeof process !== 'undefined'
  && process.versions != null
  && process.versions.node != null;

if (isNode) {
  twingLoader  = new TwingLoaderFilesystem();
  // Do stuff.
}
else {
  // Noop implementation for Browsers.
  twingLoader = new TwingLoaderArray([]);
}
// Rest of the code.

Examples of other implementations with twing-loader + storybook:

• https://github.com/cloudfour/cloudfour.com-patterns/blob/306f40bc7bcb9037ebe419bda732a077aeec70f5/twing/virtual-bundled-environment.js
• https://github.com/ec-europa/ecl-twig/blob/302575cc30fc1f5e40b8afd2f23257fc218f01fa/src/ec/storybook/.storybook/environment.js
• https://github.com/wingsuit-designsystem/wingsuit/blob/0ece544bad8cab39a983ccd8bed186cbb2d09fb9/packages/storybook/src/index.tsx

[ericmorand]

@JohnAlbin

Since we are all using the twing-loader in our Storybook config, what causes twing-loader to load the browser-only Twing when it does import { TwingEnvironment } from 'twing';? How do we control which flavor of Twing is loaded?

I assume it comes from the "browser" entry of Twing's package.json:

"main": "dist/cjs/main.js",
"browser": "dist/es/browser.js",

Which should not be used by Storybook, since it is compiling and rendering the templates from a Node environment and not from a browser one. There is something that I don't quite understand with Storybook.

[christianwiedemann]

@ericmorand No Storybook renders "stories" always in the browser.

[henrijs]

still has references to the files loaded from the filesystem

@codebymikey Could you share a more complete code fragment? What is "it" and how it "has references to the files loaded from the filesystem"?

[christianwiedemann]

Hi,

I realized right now that namespaces are already supprted. Here a sample environment.js

const path = require("path");
const {TwingEnvironment, TwingLoaderFilesystem} = require("twing");

const loader = new TwingLoaderFilesystem();
if (loader.addPath) {
  loader.addPath(path.join(__dirname, 'templates/01-atoms'), 'atoms')
  loader.addPath(path.join(__dirname, 'templates/02-molecules'), 'molecules')
}


module.exports = new TwingEnvironment(
  loader
);

The loader replaces TwingLoaderFilesystem with a prefilled PathArrayLoader. That's the reason for the if (loader.addPath) {