Add state() method handling for components

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;
 				}

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)}"`)}]);`}

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) {

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) {

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,
 };

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...
+}

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

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) {

test/runtime/samples/store-root/_config.js

@@ -0,0 +1,9 @@
+export default {
+	html: `<h1>Hello world!</h1>`,
+
+	test(assert, component, target) {
+		component.store.set({ name: 'everybody' });
+
+		assert.htmlEqual(target.innerHTML, `<h1>Hello everybody!</h1>`);
+	}
+};

test/runtime/samples/store-root/main.html

@@ -0,0 +1,11 @@
+<h1>Hello {{$name}}!</h1>
+<script>
+import { Store } from '../../../../store.js';
+export default {
+	store () {
+		return new Store({
+			name: 'world'
+		});
+	}
+}
+</script>