vite-plugin-twig-drupal 1.3.0 → 1.4.1

package/.github/workflows/node.js.yml

@@ -2,7 +2,7 @@ name: validate
 on:
   push:
     branches:
-      - 'master'
+      - 'main'
       - 'beta'
   pull_request: {}
 jobs:
@@ -43,7 +43,7 @@ jobs:
     runs-on: ubuntu-latest
     if:
       ${{ github.repository == 'larowlan/vite-plugin-twig-drupal' &&
-      contains('refs/heads/master',github.ref) && github.event_name == 'push' }}
+      contains('refs/heads/main',github.ref) && github.event_name == 'push' }}
     steps:
       - name: 🛑 Cancel Previous Runs
         uses: styfle/cancel-workflow-action@0.9.0
@@ -70,7 +70,7 @@ jobs:
           semantic_version: 22
           branches: |
             [
-              'master'
+              'main'
             ]
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/README.md

@@ -36,6 +36,7 @@
 - [This solution](#this-solution)
 - [Installation](#installation)
 - [Examples](#examples)
+- [Usage with React](#usage-with-react)
 - [Issues](#issues)
   - [🐛 Bugs](#-bugs)
   - [💡 Feature Requests](#-feature-requests)
@@ -157,8 +158,35 @@ export const ButtonStrip = {
     ${Button({title: 'Button 2', modifier: 'secondary'})}
   `
 }
+```
+
+## Usage with React
+
+When adding `framework: 'react'` to vite.config.js twig files will output React JSX functions
+that can be used inside a React Storybook instance.
+
+This way Twig components can be rendered alongside React components.
 
+However, you will need to revert to a straight TwigJS function import so you can nest Twig components
+inside other Twig components. In these instances append `?twig` to your component import. This will return a JavaScript function instead of a React component.
+When nesting 
+Twig components inside React components this is not needed. Nesting React components inside Twig components
+does not work currently.
+
+```javascript
+import Button from './button.twig';
+import OtherComponent from ../other-component.twig?twig
 
+export default {
+  title: 'Components/Button',
+  tags: ['autodocs'],
+  args: {
+    // Render by calling the component as a function.
+    // You can pass any variables down as an object.
+    otherComponent: OtherComponent(),
+  },
+  component: Button,
+};
 
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vite-plugin-twig-drupal",
-  "version": "1.3.0",
+  "version": "1.4.1",
   "description": "Provides a ⚡️ Vite plugin to transform 🌱 Twig into HTML with a 💧 Drupal flavour",
   "keywords": [
     "Vite",

package/src/index.js

@@ -1,6 +1,7 @@
 import Twig from "twig"
 import { resolve, dirname } from "node:path"
 import { existsSync } from "node:fs"
+import { normalizePath } from "vite"
 
 const { twig } = Twig
 
@@ -29,14 +30,15 @@ const resolveFile = (directory, file) => {
   for (const ix in filesToTry) {
     const path = resolve(filesToTry[ix])
     if (existsSync(path)) {
-      return path
+      return normalizePath(path)
     }
     const withDir = resolve(directory, filesToTry[ix])
     if (existsSync(withDir)) {
-      return withDir
+      return normalizePath(withDir)
     }
   }
-  return resolve(directory, file)
+
+  return normalizePath(resolve(directory, file))
 }
 
 const pluckIncludes = (tokens) => {
@@ -126,10 +128,19 @@ const plugin = (options = {}) => {
       if (options.pattern.test(id)) {
         let frameworkInclude = ""
         let frameworkTransform = "const frameworkTransform = (html) => html;"
-        if (options.framework === FRAMEWORK_REACT) {
+
+        let asTwigJs = id.match(/\?twig$/)
+
+        if (options.framework === FRAMEWORK_REACT && !asTwigJs) {
           frameworkInclude = `import React from 'react'`
           frameworkTransform = `const frameworkTransform = (html) => React.createElement('div', {dangerouslySetInnerHTML: {'__html': html}});;`
         }
+
+        if (asTwigJs) {
+          // Tidy up file path by remove ?twig
+          id = id.slice(0, -5)
+        }
+
         let embed,
           embeddedIncludes,
           functions,