nullstack · Mortaro · Apr 21, 2022 · Apr 19, 2022 · Apr 19, 2022 · Apr 19, 2022
diff --git a/builders/ssg.js b/builders/ssg.js
@@ -32,16 +32,15 @@ module.exports = async function ssg({ output, cache }) {
       writeFileSync(`${target}.html`, content)
     }
 
-    const instancesLookup = 'window.instances = ';
-    const instances = content.split("\n").find((line) => line.indexOf(instancesLookup) > -1).split(instancesLookup)[1].slice(0, -1);
+    const stateLookup = '<meta name="nullstack" content="';
+    const state = content.split("\n").find((line) => line.indexOf(stateLookup) > -1).split(stateLookup)[1].slice(0, -2);
+    const { instances, page } = JSON.parse(decodeURIComponent(state));
 
-    const pageLookup = 'window.page = ';
-    const page = content.split("\n").find((line) => line.indexOf(pageLookup) > -1).split(pageLookup)[1].slice(0, -1);
     if (url !== `/nullstack/${application.environment.key}/offline` && url !== '/404') {
-      pages[url] = JSON.parse(page);
+      pages[url] = page;
     }
 
-    const json = `{"instances": ${instances}, "page": ${page}}`;
+    const json = JSON.stringify({ instances, page });
     writeFileSync(`${target}/index.json`, json);
 
     const pattern = /href="(.*?)"/g;

diff --git a/client/state.js b/client/state.js
@@ -1,5 +1,5 @@
 import deserialize from '../shared/deserialize';
 
-const state = deserialize(decodeURI(document.querySelector(`[name=nullstack]`).content));
+const state = deserialize(decodeURIComponent(document.querySelector(`[name=nullstack]`).content));
 
 export default state;
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nullstack",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "description": "Full-stack Javascript Components for one-dev armies",
   "main": "nullstack.js",
   "author": "Mortaro",

diff --git a/server/template.js b/server/template.js
@@ -57,7 +57,7 @@ export default function ({ head, body, context, instances }) {
     ${page.schema ? `<script type="application/ld+json">${JSON.stringify(page.schema)}</script>` : ''}
     ${project.icons['180'] ? `<link rel="apple-touch-icon" sizes="180x180" href="${cdn(project.icons['180'])}">` : ''}
     <meta name="msapplication-TileColor" content="${project.backgroundColor || project.color}">
-    <meta name="nullstack" content="${encodeURI(sanitizeString(JSON.stringify(state)))}">
+    <meta name="nullstack" content="${encodeURIComponent(sanitizeString(JSON.stringify(state)))}">
     ${head.split('<!--#-->').join('')}
     <script src="${cdn(`/client.js?fingerprint=${environment.key}${timestamp}`)}" integrity="${integrities['client.js'] || ''}" defer crossorigin="anonymous"></script>
   </head>

diff --git a/tests/src/RenderableComponent.njs b/tests/src/RenderableComponent.njs
@@ -6,7 +6,7 @@ class RenderableComponent extends Nullstack {
     return <div data-nested />
   }
 
-  renderInnerComponent({children}) {
+  renderInnerComponent({ children }) {
     return (
       <div class="InnerComponent">
         <p> Inner Component </p>
@@ -19,14 +19,14 @@ class RenderableComponent extends Nullstack {
   renderFalsy() {
     return false;
   }
-  
-  render({params}) {
-    const list = params.shortList ? [1,2,3] : [1, 2, 3, 4, 5, 6]
-    const html = '<a href="/"> Nullstack </a>';
+
+  render({ params }) {
+    const list = params.shortList ? [1, 2, 3] : [1, 2, 3, 4, 5, 6]
+    const html = '<a href="/"> "Nullstack" </a>';
     return (
       <div class="RenderableComponent">
         <Falsy />
-        <div data-object={{a: 1}} />
+        <div data-object={{ a: 1 }} />
         <div data-function={RenderableComponent} />
         <div> this is a normal tag </div>
         <label for="input"> label </label>
@@ -37,7 +37,7 @@ class RenderableComponent extends Nullstack {
         <element class="element" tag={params.condition ? 'div' : 'span'}>
           element tag
         </element>
-        <InnerComponent> 
+        <InnerComponent>
           <span class="children"> children </span>
         </InnerComponent>
         <ul>
@@ -47,11 +47,11 @@ class RenderableComponent extends Nullstack {
         <head>
           <link rel="preload" href="https://nullstack.app" as="fetch" crossorigin />
         </head>
-        {!!params.condition && 
+        {!!params.condition &&
           <div class="condition"> conditionally rendered div </div>
         }
-        <a params={{shortList: true}} class="short-list"> long list </a>
-        <a params={{condition: true}} class="true-condition"> long list </a>
+        <a params={{ shortList: true }} class="short-list"> long list </a>
+        <a params={{ condition: true }} class="true-condition"> long list </a>
         <div data-condition={!!params.condition} />
         <div data-short-list={!!params.shortList} />
         <div data-name={this.name} />

diff --git a/webpack.config.js b/webpack.config.js
@@ -107,7 +107,7 @@ function server(env, argv) {
       nodeArgs: ['--enable-source-maps'],
       quiet: true
     })
-  ]) : undefined;
+  ]) : [];
   return {
     mode: argv.environment,
     entry: './server.js',

diff --git a/workers/staticHelpers.js b/workers/staticHelpers.js
@@ -7,11 +7,10 @@ function withAPI(url) {
 
 async function extractData(response) {
   const html = await response.clone().text();
-  const instancesLookup = 'window.instances = ';
-  const instances = html.split("\n").find((line) => line.indexOf(instancesLookup) > -1).split(instancesLookup)[1].slice(0, -1);
-  const pageLookup = 'window.page = ';
-  const page = html.split("\n").find((line) => line.indexOf(pageLookup) > -1).split(pageLookup)[1].slice(0, -1);
-  const json = `{"instances": ${instances}, "page": ${page}}`;
+  const stateLookup = '<meta name="nullstack" content="';
+  const state = html.split("\n").find((line) => line.indexOf(stateLookup) > -1).split(stateLookup)[1].slice(0, -2);
+  const { instances, page } = JSON.parse(decodeURI(state));
+  const json = JSON.stringify({ instances, page });
   return new Response(json, {
     headers: { 'Content-Type': 'application/json' }
   });