Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: allow script locals to use global locals #133

Merged
merged 2 commits into from
Sep 26, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 3 additions & 4 deletions lib/locals.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,8 @@ const matchHelper = require('posthtml-match-helper')
const { render } = require('posthtml-render')
const { match } = require('posthtml/lib/api')

// const code = 'module.exports = {a: 1}';
const ctx = vm.createContext({ module })

// const r = vm.runInContext(code, ctx)

/**
* @description Get the script tag with locals attribute from a node list and return locals.
*
Expand All @@ -22,13 +19,15 @@ const ctx = vm.createContext({ module })
function scriptDataLocals (tree, options) {
const locals = {}
const localsAttr = options.localsAttr
const localsContext = options.locals || {}

match.call(tree, matchHelper(`script[${localsAttr}]`), node => {
if (node.content) {
const code = render(node.content)

try {
const local = vm.runInContext(code, ctx)
const parsedContext = vm.createContext({ ...ctx, locals: localsContext })
const local = vm.runInContext(code, parsedContext)

Object.assign(locals, local)
} catch {};
Expand Down
34 changes: 33 additions & 1 deletion readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,38 @@ You can also use the script tag with the attribute `locals` or you custome attri
<div>My name: Scrum</div>
```

In addition, the use of script tag allow you to use `locals` defined globally to assign data to variables.

```js
posthtml(expressions({ locals: { foo: 'bar' } }))
.process(readFileSync('index.html', 'utf8'))
.then((result) => console.log(result.html))
```

```html
<script locals>
module.exports = {
name: 'Scrum',
foo: locals.foo || 'empty'
}
</script>

<div>My name: {{name}}</div>
<div>Foo: {{foo}}</div>
```

```html
<script locals>
module.exports = {
name: 'Scrum',
foo: locals.foo || 'empty'
}
</script>

<div>My name: {{name}}</div>
<div>Foo: bar</div>
```

### Unescaped Locals

By default, special characters will be escaped so that they show up as text, rather than html code. For example, if you had a local containing valid html as such:
Expand Down Expand Up @@ -444,7 +476,7 @@ You can customize the name of the tag:

```js
var opts = {
ignoredTag: 'verbatim',
ignoredTag: 'verbatim',
locals: { foo: 'bar' } }
}

Expand Down
9 changes: 9 additions & 0 deletions test/expect/script-locals-global-not-informed.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script locals="">
module.exports = {
name: 'Scrum',
age: locals.displayAge ? '25' : 'not informed'
}
</script>

<div>My name: Scrum</div>
<div>My age: not informed</div>
9 changes: 9 additions & 0 deletions test/expect/script-locals-global.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script locals="">
module.exports = {
name: 'Scrum',
age: locals.displayAge ? '25' : 'not informed'
}
</script>

<div>My name: Scrum</div>
<div>My age: 25</div>
9 changes: 9 additions & 0 deletions test/fixtures/script-locals-global-not-informed.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script locals>
module.exports = {
name: 'Scrum',
age: locals.displayAge ? '25' : 'not informed'
}
</script>

<div>My name: {{name}}</div>
<div>My age: {{ age }}</div>
9 changes: 9 additions & 0 deletions test/fixtures/script-locals-global.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<script locals>
module.exports = {
name: 'Scrum',
age: locals.displayAge ? '25' : 'not informed'
}
</script>

<div>My name: {{name}}</div>
<div>My age: {{ age }}</div>
8 changes: 8 additions & 0 deletions test/test-locals.js
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,14 @@ test('Basic', (t) => {
return process(t, 'script-locals')
})

test('Global Locals - setting global locals', (t) => {
return process(t, 'script-locals-global', { locals: { displayAge: true } })
})

test('Global Locals - no global locals informed', (t) => {
return process(t, 'script-locals-global-not-informed')
})

test('Remove script locals', (t) => {
return process(t, 'script-locals-remove', { removeScriptLocals: true })
})