vite-plugin-twig-drupal 1.3.0 → 1.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/node.js.yml +3 -3
- package/README.md +28 -0
- package/package.json +1 -1
- package/src/index.js +10 -1
|
@@ -2,7 +2,7 @@ name: validate
|
|
|
2
2
|
on:
|
|
3
3
|
push:
|
|
4
4
|
branches:
|
|
5
|
-
- '
|
|
5
|
+
- 'main'
|
|
6
6
|
- 'beta'
|
|
7
7
|
pull_request: {}
|
|
8
8
|
jobs:
|
|
@@ -43,7 +43,7 @@ jobs:
|
|
|
43
43
|
runs-on: ubuntu-latest
|
|
44
44
|
if:
|
|
45
45
|
${{ github.repository == 'larowlan/vite-plugin-twig-drupal' &&
|
|
46
|
-
contains('refs/heads/
|
|
46
|
+
contains('refs/heads/main',github.ref) && github.event_name == 'push' }}
|
|
47
47
|
steps:
|
|
48
48
|
- name: 🛑 Cancel Previous Runs
|
|
49
49
|
uses: styfle/cancel-workflow-action@0.9.0
|
|
@@ -70,7 +70,7 @@ jobs:
|
|
|
70
70
|
semantic_version: 22
|
|
71
71
|
branches: |
|
|
72
72
|
[
|
|
73
|
-
'
|
|
73
|
+
'main'
|
|
74
74
|
]
|
|
75
75
|
env:
|
|
76
76
|
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
|
package/README.md
CHANGED
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
- [This solution](#this-solution)
|
|
37
37
|
- [Installation](#installation)
|
|
38
38
|
- [Examples](#examples)
|
|
39
|
+
- [Usage with React](#usage-with-react)
|
|
39
40
|
- [Issues](#issues)
|
|
40
41
|
- [🐛 Bugs](#-bugs)
|
|
41
42
|
- [💡 Feature Requests](#-feature-requests)
|
|
@@ -157,8 +158,35 @@ export const ButtonStrip = {
|
|
|
157
158
|
${Button({title: 'Button 2', modifier: 'secondary'})}
|
|
158
159
|
`
|
|
159
160
|
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## Usage with React
|
|
164
|
+
|
|
165
|
+
When adding `framework: 'react'` to vite.config.js twig files will output React JSX functions
|
|
166
|
+
that can be used inside a React Storybook instance.
|
|
167
|
+
|
|
168
|
+
This way Twig components can be rendered alongside React components.
|
|
160
169
|
|
|
170
|
+
However, you will need to revert to a straight TwigJS function import so you can nest Twig components
|
|
171
|
+
inside other Twig components. In these instances append `?twig` to your component import. This will return a JavaScript function instead of a React component.
|
|
172
|
+
When nesting
|
|
173
|
+
Twig components inside React components this is not needed. Nesting React components inside Twig components
|
|
174
|
+
does not work currently.
|
|
175
|
+
|
|
176
|
+
```javascript
|
|
177
|
+
import Button from './button.twig';
|
|
178
|
+
import OtherComponent from ../other-component.twig?twig
|
|
161
179
|
|
|
180
|
+
export default {
|
|
181
|
+
title: 'Components/Button',
|
|
182
|
+
tags: ['autodocs'],
|
|
183
|
+
args: {
|
|
184
|
+
// Render by calling the component as a function.
|
|
185
|
+
// You can pass any variables down as an object.
|
|
186
|
+
otherComponent: OtherComponent(),
|
|
187
|
+
},
|
|
188
|
+
component: Button,
|
|
189
|
+
};
|
|
162
190
|
|
|
163
191
|
```
|
|
164
192
|
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -126,10 +126,19 @@ const plugin = (options = {}) => {
|
|
|
126
126
|
if (options.pattern.test(id)) {
|
|
127
127
|
let frameworkInclude = ""
|
|
128
128
|
let frameworkTransform = "const frameworkTransform = (html) => html;"
|
|
129
|
-
|
|
129
|
+
|
|
130
|
+
let asTwigJs = id.match(/\?twig$/)
|
|
131
|
+
|
|
132
|
+
if (options.framework === FRAMEWORK_REACT && !asTwigJs) {
|
|
130
133
|
frameworkInclude = `import React from 'react'`
|
|
131
134
|
frameworkTransform = `const frameworkTransform = (html) => React.createElement('div', {dangerouslySetInnerHTML: {'__html': html}});;`
|
|
132
135
|
}
|
|
136
|
+
|
|
137
|
+
if (asTwigJs) {
|
|
138
|
+
// Tidy up file path by remove ?twig
|
|
139
|
+
id = id.slice(0, -5)
|
|
140
|
+
}
|
|
141
|
+
|
|
133
142
|
let embed,
|
|
134
143
|
embeddedIncludes,
|
|
135
144
|
functions,
|