Merge pull request #133 from Konnng/master

feat: allow script locals to use global locals

Author: Scrum

lib/locals.js

@@ -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.
  *
@@ -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 {};

readme.md

@@ -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:
@@ -444,7 +476,7 @@ You can customize the name of the tag:
 
 ```js
 var opts = {
-  ignoredTag: 'verbatim', 
+  ignoredTag: 'verbatim',
   locals: { foo: 'bar' } }
 }
 

test/expect/script-locals-global-not-informed.html

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

test/expect/script-locals-global.html

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

test/fixtures/script-locals-global-not-informed.html

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

test/fixtures/script-locals-global.html

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

test/test-locals.js

@@ -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 })
 })