diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts
index 0971b7552a..cace7d5e2e 100644
--- a/src/generators/Generator.ts
+++ b/src/generators/Generator.ts
@@ -610,6 +610,10 @@ export default class Generator {
addDeclaration('setup', templateProperties.setup.value);
}
+ if (templateProperties.store) {
+ addDeclaration('store', templateProperties.store.value);
+ }
+
if (templateProperties.tag) {
this.tag = templateProperties.tag.value.value;
}
diff --git a/src/generators/dom/index.ts b/src/generators/dom/index.ts
index b36413c5f1..b8fb36f801 100644
--- a/src/generators/dom/index.ts
+++ b/src/generators/dom/index.ts
@@ -181,8 +181,7 @@ export default function dom(
// generate initial state object
const expectedProperties = Array.from(generator.expectedProperties);
const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
- const storeProps = options.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
-
+ const storeProps = options.store || templateProperties.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
const initialState = [];
if (globals.length > 0) {
@@ -206,6 +205,7 @@ export default function dom(
${options.dev && !generator.customElement &&
`if (!options || (!options.target && !options.root)) throw new Error("'target' is a required option");`}
@init(this, options);
+ ${templateProperties.store && `this.store = %store();`}
${generator.usesRefs && `this.refs = {};`}
this._state = @assign(${initialState.join(', ')});
${storeProps.length > 0 && `this.store._add(this, [${storeProps.map(prop => `"${prop.slice(1)}"`)}]);`}
diff --git a/src/generators/server-side-rendering/index.ts b/src/generators/server-side-rendering/index.ts
index 0ccee8cdd5..4d4399f695 100644
--- a/src/generators/server-side-rendering/index.ts
+++ b/src/generators/server-side-rendering/index.ts
@@ -72,7 +72,7 @@ export default function ssr(
// generate initial state object
const expectedProperties = Array.from(generator.expectedProperties);
const globals = expectedProperties.filter(prop => globalWhitelist.has(prop));
- const storeProps = options.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
+ const storeProps = options.store || templateProperties.store ? expectedProperties.filter(prop => prop[0] === '$') : [];
const initialState = [];
if (globals.length > 0) {
@@ -80,7 +80,12 @@ export default function ssr(
}
if (storeProps.length > 0) {
- initialState.push(`options.store._init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`);
+ const initialize = `_init([${storeProps.map(prop => `"${prop.slice(1)}"`)}])`
+ if (options.store) {
+ initialState.push(`options.store.${initialize}`);
+ } else if (templateProperties.store) {
+ initialState.push(`%store().${initialize}`);
+ }
}
if (templateProperties.data) {
diff --git a/src/shared/index.js b/src/shared/index.js
index e2efb5b4c3..7a33c73d29 100644
--- a/src/shared/index.js
+++ b/src/shared/index.js
@@ -71,7 +71,7 @@ export function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
export function observe(key, callback, options) {
diff --git a/src/validate/js/propValidators/index.ts b/src/validate/js/propValidators/index.ts
index 9ba12c0dad..942c757601 100644
--- a/src/validate/js/propValidators/index.ts
+++ b/src/validate/js/propValidators/index.ts
@@ -14,6 +14,7 @@ import props from './props';
import tag from './tag';
import transitions from './transitions';
import setup from './setup';
+import store from './store';
export default {
data,
@@ -32,4 +33,5 @@ export default {
tag,
transitions,
setup,
+ store,
};
diff --git a/src/validate/js/propValidators/store.ts b/src/validate/js/propValidators/store.ts
new file mode 100644
index 0000000000..27da5551c6
--- /dev/null
+++ b/src/validate/js/propValidators/store.ts
@@ -0,0 +1,6 @@
+import { Validator } from '../../';
+import { Node } from '../../../interfaces';
+
+export default function store(validator: Validator, prop: Node) {
+ // not sure there's anything we need to check here...
+}
diff --git a/test/js/samples/collapses-text-around-comments/expected-bundle.js b/test/js/samples/collapses-text-around-comments/expected-bundle.js
index c1aaf7b0f6..9b965c9458 100644
--- a/test/js/samples/collapses-text-around-comments/expected-bundle.js
+++ b/test/js/samples/collapses-text-around-comments/expected-bundle.js
@@ -97,7 +97,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/component-static/expected-bundle.js b/test/js/samples/component-static/expected-bundle.js
index 5868dd94e5..9688eebfad 100644
--- a/test/js/samples/component-static/expected-bundle.js
+++ b/test/js/samples/component-static/expected-bundle.js
@@ -73,7 +73,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/computed-collapsed-if/expected-bundle.js b/test/js/samples/computed-collapsed-if/expected-bundle.js
index cc822269ce..928635e6fc 100644
--- a/test/js/samples/computed-collapsed-if/expected-bundle.js
+++ b/test/js/samples/computed-collapsed-if/expected-bundle.js
@@ -73,7 +73,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/css-media-query/expected-bundle.js b/test/js/samples/css-media-query/expected-bundle.js
index 123e8b07fa..af9a6237fb 100644
--- a/test/js/samples/css-media-query/expected-bundle.js
+++ b/test/js/samples/css-media-query/expected-bundle.js
@@ -93,7 +93,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
index d1a113a6ab..511cc37772 100644
--- a/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
+++ b/test/js/samples/css-shadow-dom-keyframes/expected-bundle.js
@@ -85,7 +85,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/do-use-dataset/expected-bundle.js b/test/js/samples/do-use-dataset/expected-bundle.js
index 9a48d8db96..7f12d50f9d 100644
--- a/test/js/samples/do-use-dataset/expected-bundle.js
+++ b/test/js/samples/do-use-dataset/expected-bundle.js
@@ -89,7 +89,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js b/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
index 0602ad1ed4..e55f7bbb99 100644
--- a/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
+++ b/test/js/samples/dont-use-dataset-in-legacy/expected-bundle.js
@@ -93,7 +93,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js b/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
index b595d14633..607125c9bd 100644
--- a/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
+++ b/test/js/samples/dont-use-dataset-in-svg/expected-bundle.js
@@ -93,7 +93,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/each-block-changed-check/expected-bundle.js b/test/js/samples/each-block-changed-check/expected-bundle.js
index 685e073f38..fa26040cc3 100644
--- a/test/js/samples/each-block-changed-check/expected-bundle.js
+++ b/test/js/samples/each-block-changed-check/expected-bundle.js
@@ -105,7 +105,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/event-handlers-custom/expected-bundle.js b/test/js/samples/event-handlers-custom/expected-bundle.js
index 6f51e1b8d2..7d2c297952 100644
--- a/test/js/samples/event-handlers-custom/expected-bundle.js
+++ b/test/js/samples/event-handlers-custom/expected-bundle.js
@@ -85,7 +85,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/if-block-no-update/expected-bundle.js b/test/js/samples/if-block-no-update/expected-bundle.js
index a4cf23cfed..75a956d483 100644
--- a/test/js/samples/if-block-no-update/expected-bundle.js
+++ b/test/js/samples/if-block-no-update/expected-bundle.js
@@ -89,7 +89,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/if-block-simple/expected-bundle.js b/test/js/samples/if-block-simple/expected-bundle.js
index 639f037528..b51d2a83e2 100644
--- a/test/js/samples/if-block-simple/expected-bundle.js
+++ b/test/js/samples/if-block-simple/expected-bundle.js
@@ -89,7 +89,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
index 8fa1f7bfd4..ff87d9ce83 100644
--- a/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized-multiple/expected-bundle.js
@@ -89,7 +89,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/inline-style-optimized-url/expected-bundle.js b/test/js/samples/inline-style-optimized-url/expected-bundle.js
index fb61583a46..7cb79030a3 100644
--- a/test/js/samples/inline-style-optimized-url/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized-url/expected-bundle.js
@@ -89,7 +89,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/inline-style-optimized/expected-bundle.js b/test/js/samples/inline-style-optimized/expected-bundle.js
index 1cf474d1b0..9a7c67303d 100644
--- a/test/js/samples/inline-style-optimized/expected-bundle.js
+++ b/test/js/samples/inline-style-optimized/expected-bundle.js
@@ -89,7 +89,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/inline-style-unoptimized/expected-bundle.js b/test/js/samples/inline-style-unoptimized/expected-bundle.js
index c4152305da..34735ee707 100644
--- a/test/js/samples/inline-style-unoptimized/expected-bundle.js
+++ b/test/js/samples/inline-style-unoptimized/expected-bundle.js
@@ -89,7 +89,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/input-without-blowback-guard/expected-bundle.js b/test/js/samples/input-without-blowback-guard/expected-bundle.js
index bd62e84ac5..9d58e2e33e 100644
--- a/test/js/samples/input-without-blowback-guard/expected-bundle.js
+++ b/test/js/samples/input-without-blowback-guard/expected-bundle.js
@@ -93,7 +93,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/legacy-input-type/expected-bundle.js b/test/js/samples/legacy-input-type/expected-bundle.js
index 8eeda86d6f..e04c2d92ec 100644
--- a/test/js/samples/legacy-input-type/expected-bundle.js
+++ b/test/js/samples/legacy-input-type/expected-bundle.js
@@ -91,7 +91,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/legacy-quote-class/expected-bundle.js b/test/js/samples/legacy-quote-class/expected-bundle.js
index 9e454ba444..866f1729e5 100644
--- a/test/js/samples/legacy-quote-class/expected-bundle.js
+++ b/test/js/samples/legacy-quote-class/expected-bundle.js
@@ -108,7 +108,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/media-bindings/expected-bundle.js b/test/js/samples/media-bindings/expected-bundle.js
index 80729e9179..992eab5ab1 100644
--- a/test/js/samples/media-bindings/expected-bundle.js
+++ b/test/js/samples/media-bindings/expected-bundle.js
@@ -101,7 +101,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/non-imported-component/expected-bundle.js b/test/js/samples/non-imported-component/expected-bundle.js
index 3c6ff9f91f..af4e62db5b 100644
--- a/test/js/samples/non-imported-component/expected-bundle.js
+++ b/test/js/samples/non-imported-component/expected-bundle.js
@@ -87,7 +87,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
index 4357b4a202..1b5743bc56 100644
--- a/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
+++ b/test/js/samples/onrender-onteardown-rewritten/expected-bundle.js
@@ -73,7 +73,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/setup-method/expected-bundle.js b/test/js/samples/setup-method/expected-bundle.js
index 9ff9831ae4..5597140eef 100644
--- a/test/js/samples/setup-method/expected-bundle.js
+++ b/test/js/samples/setup-method/expected-bundle.js
@@ -73,7 +73,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/use-elements-as-anchors/expected-bundle.js b/test/js/samples/use-elements-as-anchors/expected-bundle.js
index c97c52ab12..0c52eb89f0 100644
--- a/test/js/samples/use-elements-as-anchors/expected-bundle.js
+++ b/test/js/samples/use-elements-as-anchors/expected-bundle.js
@@ -97,7 +97,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/js/samples/window-binding-scroll/expected-bundle.js b/test/js/samples/window-binding-scroll/expected-bundle.js
index d44d545cbf..7634347645 100644
--- a/test/js/samples/window-binding-scroll/expected-bundle.js
+++ b/test/js/samples/window-binding-scroll/expected-bundle.js
@@ -93,7 +93,7 @@ function init(component, options) {
component.options = options;
component.root = options.root || component;
- component.store = component.root.options.store;
+ component.store = component.root.store || component.root.options.store;
}
function observe(key, callback, options) {
diff --git a/test/runtime/samples/store-root/_config.js b/test/runtime/samples/store-root/_config.js
new file mode 100644
index 0000000000..775c0c0d8b
--- /dev/null
+++ b/test/runtime/samples/store-root/_config.js
@@ -0,0 +1,9 @@
+export default {
+ html: `Hello world!
`,
+
+ test(assert, component, target) {
+ component.store.set({ name: 'everybody' });
+
+ assert.htmlEqual(target.innerHTML, `Hello everybody!
`);
+ }
+};
diff --git a/test/runtime/samples/store-root/main.html b/test/runtime/samples/store-root/main.html
new file mode 100644
index 0000000000..01f7434fc5
--- /dev/null
+++ b/test/runtime/samples/store-root/main.html
@@ -0,0 +1,11 @@
+Hello {{$name}}!
+