nightlycommit / twing-loader Goto Github PK

In this test project : https://github.com/ryuran/twing-loader-test

Twing loader fail to resolve environmentModulePath and do not find twingEnv.js.

Child html-webpack-plugin for "index.html":
     1 asset
    Entrypoint undefined = index.html
    [./node_modules/html-webpack-plugin/lib/loader.js!./src/fake.txt] 1.28 KiB {0} [built] [failed] [1 error]

    ERROR in ./src/fake.txt (./node_modules/html-webpack-plugin/lib/loader.js!./src/fake.txt)
    Module build failed (from ./node_modules/twing-loader/dist/index.js):
    Error: Cannot find module 'twingEnv.js'
    Require stack:
    - /Users/yliechti/Sites/twing-loader-test/node_modules/twing-loader/dist/index.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/loader-runner/lib/loadLoader.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/loader-runner/lib/LoaderRunner.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/webpack/lib/NormalModule.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/webpack/lib/NormalModuleFactory.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/webpack/lib/Compiler.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/webpack/lib/webpack.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/webpack-cli/bin/utils/convert-argv.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/webpack-cli/bin/cli.js
    - /Users/yliechti/Sites/twing-loader-test/node_modules/webpack/bin/webpack.js
        at Function.Module._resolveFilename (internal/modules/cjs/loader.js:623:15)
        at Function.resolve (/Users/yliechti/Sites/twing-loader-test/node_modules/v8-compile-cache/v8-compile-cache.js:166:23)
        at Object.default_1 (/Users/yliechti/Sites/twing-loader-test/node_modules/twing-loader/dist/index.js:37:34)

As explained in this issue, the loader does not support the source function. It needs to be added.

Hello

https://github.com/nicolasRdr/twing-loader/blob/master/src/loader.js#L15
This line use this.ressource it’s the path of original file and not the result of previous loaders.

We should une sourceData here

module.exports = async function loader(sourceData) {

But I don't know how use it with Twing API.
Maybe @ericmorand can help

Related to NightlyCommit/twing#473

twing-loader is currently not supporting Twing@4 because of async support. Since async support is there to stay, it's time to upgrade twing-loader to a new major version that supports Twing@4.

Hi,

I can't get this loader to work with the html-webpack-plugin. I get TypeError: template.render is not a function. I've seen a test case in this repo using html-webpack-plugin and configured webpack in the same way.

Hi. I use Twing to integrate Twig templates into Storybook and that works great when you want to build a story around an external Twig template.

Now suppose I wanted to write a story around a component that should be embedded but doesn't have any concrete implementations. Then I would construct the source template in a string but I would not be able to use import any more, since the template is a string in memory and not a file on disk, and twing-loader would not be able to do its magic. How, then, should I load such a template that is stored in a string (that may use {% embed %} to reference other templates)?

Is it possible to update variables inside renderContext.

My webpack file looks like:

const patterns = require('./_silo/patterns.json');
.....
  module: {
    rules: [
      {
        test: /\.twig$/,
        use: [
          {
            loader: 'twing-loader',
            options: {
              environmentModulePath: require.resolve('./environment.js'),
              renderContext: {
                "patterns": patterns.patterns
              }
            }
          },
        ],
      },

When I change data inside "patterns.json" the variables inside the renderContext are not updated in my twig file.
Do I have to switch to "Render at runtime"?

Thanks for help

On Windows, the loader fails to generate a valid code and triggers syntax errors:

SyntaxError: Bad character escape sequence (1:65)
  Module parse failed: Bad character escape sequence (1:65)
  File was processed with these loaders:
   * ./node_modules/html-webpack-plugin/lib/loader.js
   * ./node_modules/twing-loader/dist/index.js
  You may need an additional loader to handle the result of these loaders.
  > const {cache, loader, getEnvironment} = require('E:\bamboo-home\xml-data\build-dir\FRONT-JOB1\sites\node_modules\twing-loader\dist\runtime.js');
  | const env = getEnvironment(require('E:\bamboo-home\xml-data\build-dir\FRONT-JOB1\sites\environment.js'));
  | cache.write('__HASHED__3f3518231f054cf969de2034816d600e1a9b4c3268efab00906999bd1f8d8b20', (() => {let module = {:

I think this is because in the loader, require.resolve is used to get the path of some files, but this path will contain backslashes on Windows that should be escaped.

Hi team,

I have a working implementation of a Twing loader (still need to test it with other loaders to ensure that #2 is fixed) that comes with extensive test suite and 100% code coverage.

Since this repository doesn't seem to be maintained as much as needed, what would you think about transfering both the repository and the npm package to me? I would take care of the CD and quality-oriented stuff.

Hi,

Are there any plans to upgrade the loader to use version 6 of twing?

Thank you

Hello,

When I edit and save my twig file used as template of HtmlWebpackPlugin, I expect to see my browser affected (reload or HMR).

When trying to use a twing fork, the typescript compilation fails because prepack occurs before the node_modules are installed.

Source: https://stackoverflow.com/a/57503862

It seems this loader is not compatible with webpack 5. When using with Storybook, my story gives ReferenceError: Buffer is not defined. Not sure what that means as I cannot see any line referencing Buffer, but I guess the point here is just that webpack 5 compatibility is needed.

Hey there. I'm using twing to provide twig support inside of Storybook, and the templates reload with changes to twig in most cases, but not all. I have a few templates that load the original twig template no matter how many times i've updated the files. That leads me to believe it's the twing cache.

I have set auto_reload: true, and cache: false but I think I need to pass a new Twing environment each time in order for the changes to work, based on comments found in https://gitlab.com/nightlycommit/twing/-/issues/538 and https://stackoverflow.com/questions/67641687/cannot-disable-cache-in-twing-template-engine-node-js-express-js

That makes sense to me, but I'm not quite sure how to do that within the parameters required by webpack / twing-loader ?

I have this in my storybook's webpack config:

    // add twig support to storybook
    config.module.rules.push({
      test: /\.twig/,
      use: [
        {
          loader: 'twing-loader',
          options: {
            environmentModulePath: path.resolve(__dirname, 'twing-environment.js'),
          },
        },
      ],
      include: path.resolve(__dirname, '..', 'components'),
    });

and my twing-environment.js:

const { TwingEnvironment, TwingLoaderRelativeFilesystem } = require('twing');
const { addDrupalExtensions } = require('drupal-twig-extensions/twing');

const twing = new TwingEnvironment(
  new TwingLoaderRelativeFilesystem(),
  { autoescape: false, auto_reload: true, cache: false }
);

addDrupalExtensions(twing);

module.exports = twing;

Any pointers would be greatly appreciated.

twing-loader does not seem to support interpolation when used in an include statement

This works
{% include "./test.twig" %}

This does not work
{% set filename = "test" %} {% include "/#{filename}.twig" %}

Regular interpolation in a paragraph string does work however so I believe it's related to order of operations. This is the error I receive in storybook.

TwingErrorLoader: Template "/test.twig" is not defined in "C:/Users/dango/Development/twigbook/components/Example/Example.twig" at line 7.

Any help you can provide is appreciated.

I encounter the following warning when using the twing-loader along with the HtmlWebpackPlugin:

  WARNING in ./template/landingpage/preview.twig (./node_modules/html-webpack-plugin/lib/loader.js!./template/landingpage/preview.twig)
  Invalid dependencies have been reported by plugins or loaders for this module. All reported dependencies need to be absolute paths.
  Invalid dependencies may lead to broken watching and caching.
  As best effort we try to convert all invalid values to absolute paths and converting globs into context dependencies, but this is deprecated behavior.
  Loaders: Pass absolute paths to this.addDependency (existing files), this.addMissingDependency (not existing files), and this.addContextDependency (directories).
  Plugins: Pass absolute paths to fileDependencies (existing files), missingDependencies (not existing files), and contextDependencies (directories).
  Globs: They are not supported. Pass absolute path to the directory as context dependencies.
  The following invalid values have been reported:
   * "C:/dev/bsi-cx-design-template/internal/environment.js"
   * "C:/dev/bsi-cx-design-template/template/landingpage/preview.twig"
   * "_layout.twig"

  Child HtmlWebpackCompiler compiled with 3 warnings

I will submit a pull request, that resolves this issue (just creating this issue to reference it in the pull request).

Affected versions:
html-webpack-plugin: 5.3.1
twing: 5.0.2
twing-loader: 4.0.0
webpack: 5.39.1

Currrently, errors thrown by Twing are not handled and might break the build. It would be nice to catch these errors and to pass them to the this.async function to avoid breaking the build in dev mode.

An example to catch parsing errors:

let module: TwingNodeModule;
try {
  module = environment.parse(tokenStream);
} catch (error) {
  callback(error);
  return null;
}

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?

Twing@3 comes with some refinments that makes creating a loader easier and more robust.

@ericmorand I'm using the latest version of twing and twing-loader but still having trouble with Storybook HTML because a promise is returned and I've not found a way to make the export wait for the Promise.

This is what I'm trying:

const template = require('./button.twig');

export default {
  title: 'Components/Button',
};

const test = template({
  foo: 'bar',
}).then(output => {
  return output;
});
// When the promise resolves, `test` contains the markup I want.

export const Default = () =>
  template({
    foo: 'bar',
  }).then(output => {
    return output;
  });
// But the above doesn't resolve in time before it is exported to Storybook.

I don't suppose you have any advice or tips?

The README could be improved for better readability.

In development, it's sometimes helpful to indicate where templates begin and end in the markup, like:

<!-- START: some-path/template.twig -->
  <div>I'm a template.</div>
<!-- END: some-path/template.twig -->

I've added this option to https://github.com/MichaelAllenWarner/twing-loader. I'll make a PR for it that references this issue.

Currently, it is possible to pass options to the loader that are not part of the expected schema. This is because the additionalProperties property of the schema passed to schema-utils is unset - and thus default to true.