diff --git a/src/generators/Generator.ts b/src/generators/Generator.ts
index 0971b7552af6..cace7d5e2e55 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 b36413c5f129..b8fb36f80104 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 0ccee8cdd597..4d4399f69553 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 e2efb5b4c353..7a33c73d294b 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 9ba12c0dad18..942c757601dd 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 000000000000..27da5551c655
--- /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 c1aaf7b0f616..9b965c94585f 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 5868dd94e53f..9688eebfadb8 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 cc822269ce3b..928635e6fcd7 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 123e8b07fa4a..af9a6237fbc5 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 d1a113a6abc3..511cc3777237 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 9a48d8db96ff..7f12d50f9d18 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 0602ad1ed44f..e55f7bbb99d9 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 b595d146334a..607125c9bd26 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 685e073f38e1..fa26040cc39f 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 6f51e1b8d270..7d2c297952c5 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 a4cf23cfed61..75a956d48309 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 639f037528d2..b51d2a83e247 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 8fa1f7bfd47e..ff87d9ce8381 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 fb61583a4691..7cb79030a349 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 1cf474d1b0ca..9a7c67303d6e 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 c4152305da8e..34735ee70745 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 bd62e84ac584..9d58e2e33e6a 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 8eeda86d6f6b..e04c2d92ec45 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 9e454ba44402..866f1729e5b0 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 80729e91795e..992eab5ab18e 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 3c6ff9f91fb1..af4e62db5bc4 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 4357b4a20283..1b5743bc56fb 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 9ff9831ae4ea..5597140eef58 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 c97c52ab122e..0c52eb89f0a5 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 d44d545cbf06..7634347645d1 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 000000000000..775c0c0d8b43
--- /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 000000000000..01f7434fc5c3
--- /dev/null
+++ b/test/runtime/samples/store-root/main.html
@@ -0,0 +1,11 @@
+Hello {{$name}}!
+