Skip to content
This repository has been archived by the owner on Mar 14, 2024. It is now read-only.

Possible to use namespaces in browser? #13

Open
robertromore opened this issue Sep 20, 2019 · 11 comments
Open

Possible to use namespaces in browser? #13

robertromore opened this issue Sep 20, 2019 · 11 comments

Comments

@robertromore
Copy link

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
Copy link
Member

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
Copy link
Author

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

@christianwiedemann
Copy link

Hi, any news here. Got the same problem.

@christianwiedemann
Copy link

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
Copy link

JohnAlbin commented Mar 23, 2021

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
Copy link

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

@codebymikey
Copy link

@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:

@ericmorand
Copy link
Member

@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
Copy link

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

@henrijs
Copy link

henrijs commented Dec 16, 2021

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
Copy link

christianwiedemann commented Feb 12, 2022

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) {

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants