@cocreate/state 1.31.0 → 2.0.0

package/CONTRIBUTING.md

@@ -1,19 +1,19 @@
 # Contributing to CoCreate-state
 
-This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-state/graphs/contributors).
-You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-state/pulls),
-[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-state/issues).
+This project is work of [many contributors](https://github.com/CoCreateJS/state/graphs/contributors).
+You're encouraged to submit [pull requests](https://github.com/CoCreateJS/state/pulls),
+[propose features and discuss issues](https://github.com/CoCreateJS/state/issues).
 
 In the examples below, substitute your Github username for `contributor` in URLs.
 
 ## Fork the Project
 
-Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-state) and check out your copy.
+Fork the [project on Github](https://github.com/CoCreateJS/state) and check out your copy.
 
 ```
 git state https://github.com/contributor/CoCreate-state.git
 cd CoCreate-state
-git remote add upstream https://gitlab.com/cocreatejs/CoCreate-state.git
+git remote add upstream https://github.com/CoCreateJS/state.git
 ```
 
 ## Create a Topic Branch
@@ -74,7 +74,7 @@ git push origin my-feature-branch
 
 ## Make a Pull Request
 
-Go to [https://github.com/CoCreate-app/CoCreate-state](https://github.com/CoCreate-app/CoCreate-state) and select your feature branch.
+Go to [https://github.com/CoCreateJS/state](https://github.com/CoCreateJS/state) and select your feature branch.
 Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
 
 ## Rebase

package/README.md

@@ -2,14 +2,14 @@
 
 `@cocreate/state` provides declarative state persistence and state-driven UI updates for CoCreate applications. A source element stores selected values under one or more keys, and elements with matching `state-id` attributes replay those values into their attributes, values, classes, or element methods.
 
-[Docs and demo](https://cocreate.app/docs/state) | [Changelog](https://github.com/CoCreate-app/CoCreate-state/blob/master/CHANGELOG.md) | [Issues](https://github.com/CoCreate-app/CoCreate-state/issues)
+[Docs and demo](https://CoCreateJS.com/docs/state) | [Changelog](https://github.com/CoCreateJS/state/blob/master/CHANGELOG.md) | [Issues](https://github.com/CoCreateJS/state/issues)
 
 ## Installation
 
 ### CDN
 
 ```html
-<script src="https://cdn.cocreate.app/state/latest/CoCreate-state.min.js"></script>
+<script src="https://cdn.CoCreateJS.com/state/latest/CoCreate-state.min.js"></script>
 ```
 
 ### npm
@@ -274,11 +274,11 @@ Use the registered action name `state` and ensure the action element receives th
 
 ## Contributing
 
-Please read the [contributing guide](https://github.com/CoCreate-app/CoCreate-state/blob/master/CONTRIBUTING.md), open an [issue](https://github.com/CoCreate-app/CoCreate-state/issues), or submit a pull request. Changes to storage selection, state shape, attribute assignment, history behavior, and the `stateEnd` event are compatibility-sensitive and should include documentation and examples.
+Please read the [contributing guide](https://github.com/CoCreateJS/state/blob/master/CONTRIBUTING.md), open an [issue](https://github.com/CoCreateJS/state/issues), or submit a pull request. Changes to storage selection, state shape, attribute assignment, history behavior, and the `stateEnd` event are compatibility-sensitive and should include documentation and examples.
 
 ## License
 
 This software is dual-licensed under the GNU Affero General Public License version 3 (AGPLv3) and a commercial license.
 
-- **Open source use:** For open-source projects and non-commercial use, the software is available under the AGPLv3. See the [LICENSE file](https://github.com/CoCreate-app/CoCreate-state/blob/master/LICENSE).
-- **Commercial use:** For-profit use requires a commercial license from [CoCreate](https://cocreate.app).
+- **Open source use:** For open-source projects and non-commercial use, the software is available under the AGPLv3. See the [LICENSE file](https://github.com/CoCreateJS/state/blob/master/LICENSE).
+- **Commercial use:** For-profit use requires a commercial license from [CoCreate](https://CoCreateJS.com).

package/demo/iframe.html

@@ -20,6 +20,6 @@
         </button>
 
         <!--<script src="../dist/CoCreate-state.js"></script>-->
-        <script src="https://CoCreate.app/dist/CoCreate.js"></script>
+        <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
     </body>
 </html>

package/demo/index.html

@@ -12,7 +12,7 @@
 		<!-- CoCreate CSS CDN -->
 		<link
 			rel="stylesheet"
-			href="https://cdn.cocreate.app/state/latest/CoCreate-state.min.css"
+			href="https://cdn.CoCreateJS.com/state/latest/CoCreate-state.min.css"
 			type="text/css" />
 		<link rel="manifest" href="/manifest.webmanifest" />
 	</head>
@@ -80,7 +80,7 @@
 
 		<button>
 			<a
-				href="https://server.cocreate.app/CoCreate-attributes/CoCreate-attibutes.html"
+				href="https://server.CoCreateJS.com/CoCreate-attributes/CoCreate-attibutes.html"
 				target="_blank"
 				state-array="modules"
 				state-object="5ebc16fc8917bc59483a7e3b"
@@ -183,6 +183,6 @@
 		<div id="modal-viewport"></div>
 
 		<!--<script src="../dist/CoCreate-state.js"></script>-->
-		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
+		<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
 	</body>
 </html>

package/demo/pass-prefix.html

@@ -12,7 +12,7 @@
         <!-- CoCreate CSS CDN -->
         <link
             rel="stylesheet"
-            href="https://cdn.cocreate.app/state/latest/CoCreate-state.min.css"
+            href="https://cdn.CoCreateJS.com/state/latest/CoCreate-state.min.css"
             type="text/css" />
         <link rel="manifest" href="/manifest.webmanifest" />
     </head>
@@ -44,6 +44,6 @@
         <div id="modal-viewport"></div>
 
         <!--CoCreateJS CDN-->
-        <script src="https://cdn.cocreate.app/state/latest/CoCreate-state.min.js"></script>
+        <script src="https://cdn.CoCreateJS.com/state/latest/CoCreate-state.min.js"></script>
     </body>
 </html>

package/demo/pass-value-input.1.html

@@ -43,7 +43,7 @@
                 placeholder="Test 2"></textarea>
         </form>
 
-        <!--<script src="https://CoCreate.app/dist/CoCreate.js"></script>-->
-        <script src="https://CoCreate.app/dist/CoCreate.js"></script>
+        <!--<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>-->
+        <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
     </body>
 </html>

package/demo/pass-value-input.html

@@ -9,6 +9,6 @@
 			>Click to state: goodbye</a
 		>
 
-		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
+		<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
 	</body>
 </html>

package/demo/pass-value.html

@@ -60,6 +60,6 @@
         </div>
 
         <!--<script src="../dist/CoCreate-state.js"></script>-->
-        <script src="https://CoCreate.app/dist/CoCreate.js"></script>
+        <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
     </body>
 </html>

package/demo/test.html

@@ -15,6 +15,6 @@
         <iframe src="./iframe.html"></iframe>
 
         <!--<script src="../dist/CoCreate-state.js"></script>-->
-        <script src="https://CoCreate.app/dist/CoCreate.js"></script>
+        <script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
     </body>
 </html>

package/docs/index.html

@@ -9,7 +9,7 @@
 			rel="icon"
 			type="image/png"
 			sizes="32x32"
-			href="https://cocreate.app/images/favicon.ico" />
+			href="https://CoCreateJS.com/images/favicon.ico" />
 		<meta
 			name="description"
 			content="Data attributes which can be used for components in CoCreate framework combined as a group of attributes that dynamically change attributes &amp; fetch custom data" />
@@ -19,7 +19,7 @@
 		<meta name="robots" content="index,follow" />
 		<meta
 			property="og:image"
-			content="https://cdn.cocreate.app/docs/state.png" />
+			content="https://cdn.CoCreateJS.com/docs/state.png" />
 
 		<link
 			rel="stylesheet"
@@ -73,7 +73,7 @@
 						share-title="CoCreate-state"
 						share-height="600"
 						share-width="700"
-						share-media="https://cdn.cocreate.app/docs/state.png"
+						share-media="https://cdn.CoCreateJS.com/docs/state.png"
 						hover="display:block!important"
 						hover-query=".social-networks">
 						<div class="display:none social-networks">
@@ -104,7 +104,7 @@
 						></a>
 					</div>
 					<a
-						href="https://github.com/CoCreate-app/CoCreate-state"
+						href="https://github.com/CoCreateJS/CoCreate-state"
 						target="_blank"
 						class="margin-right:15px"
 						><i src="/assets/svg/github.svg"></i
@@ -142,7 +142,7 @@
 					<p class="padding:10px_0px line-height:1.5">
 						Or you can use cdn link:
 					</p>
-					<pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/state/latest/CoCreate-state.min.js&lt;/script&gt;</code></pre>
+					<pre><code class="language-html">&lt;script&gt;https://cdn.CoCreateJS.com/state/latest/CoCreate-state.min.js&lt;/script&gt;</code></pre>
 
 					<div
 						id="state-usage"
@@ -327,13 +327,13 @@
 				</div>
 			</div>
 			<button
-				href="https://github.com/CoCreate-app/CoCreate-state/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
+				href="https://github.com/CoCreateJS/CoCreate-state/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
 				target="_blank"
 				class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
 				<i src="../assets/svg/pencil-alt.svg"></i>
 			</button>
 		</main>
 
-		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
+		<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/state",
-  "version": "1.31.0",
+  "version": "2.0.0",
   "description": "Data attributes which can be used for components in CoCreate framework combined as a group of attributes that dynamically change attributes & fetch custom data.",
   "keywords": [
     "state",
@@ -22,17 +22,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/cocreatejs/CoCreate-state.git"
+    "url": "git+https://github.com/CoCreateJS/state.git"
   },
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/CoCreate-app/CoCreate-state/issues"
+    "url": "https://github.com/CoCreateJS/state/issues"
   },
-  "homepage": "https://cocreate.app/docs/state",
+  "homepage": "https://CoCreateJS.com/docs/state",
   "funding": {
     "type": "GitHub Sponsors ❤",
-    "url": "https://github.com/sponsors/CoCreate-app"
+    "url": "https://github.com/sponsors/CoCreateJS"
   },
   "main": "./src/index.js",
   "dependencies": {

package/src/index.js

@@ -56,10 +56,20 @@ function init() {
     syncVisibleState();
 }
 
+/**
+ *
+ * @public
+ * @environment client
+ */
 function initElements(elements) {
     for (let element of elements) initElement(element);
 }
 
+/**
+ *
+ * @public
+ * @environment client
+ */
 function initElement(element) {
     let state_id = element.getAttribute("state-id");
     if (!state_id) return;
@@ -255,6 +265,11 @@ function persistState({
     }
 }
 
+/**
+ *
+ * @public
+ * @environment client
+ */
 function setState(state, options = {}) {
     const sessionState = getStoredState(sessionStorage);
     const localState = getStoredState(localStorage);
@@ -274,6 +289,11 @@ function setState(state, options = {}) {
     return true;
 }
 
+/**
+ *
+ * @public
+ * @environment client
+ */
 async function stateAttributes(element) {
     let sessionState = getStoredState(sessionStorage);
     let localState = getStoredState(localStorage);
@@ -311,7 +331,9 @@ async function stateAttributes(element) {
 
         if (stateValue) {
             try {
-                const parsedState = JSON.parse(stateValue);
+                const parsedState = typeof stateValue === "string"
+                    ? JSON.parse(stateValue)
+                    : stateValue;
                 if (mergeState(targetState, parsedState, updates)) {
                     if (isLocal) localChanged = true;
                     else sessionChanged = true;
@@ -482,3 +504,89 @@ init();
 
 export { setState };
 export default { initElements, initElement, stateAttributes, setState };
+
+/**
+ *
+ * @name state
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name state-id
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name state-localstorage
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name state-onstoragechange
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name state-overwrite
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name state-title
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name state-to
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ *
+ * @name value
+ * @kind member
+ * @attribute
+ * @environment client
+ */
+
+/**
+ * Data attributes which can be used for components in CoCreate framework combined as a group of attributes that dynamically change attributes & fetch custom data.
+ *
+ * @module state
+ * @environment client
+ */
+
+/**
+ * Declarative selectors recognized by this module.
+ *
+ * @name declarative-selectors
+ * @kind member
+ * @selectors
+ * @environment client
+ * @example
+ * ```json
+ * [
+ *   "[state-id]"
+ * ]
+ * ```
+ */

package/test/source-state-order.test.cjs

@@ -8,9 +8,11 @@ const source = fs.readFileSync(path.join(__dirname, '../src/index.js'), 'utf8');
 function setup() {
     let stored = JSON.stringify({ 'offcanvas-app-form': { array: 'apps', object: 'previous' } });
     const requests = [];
+    const warnings = [];
+    const updates = [];
     const storage = { getItem: () => stored, setItem: (_, value) => { stored = value; } };
     const context = vm.createContext({
-        console, sessionStorage: storage,
+        console: { ...console, warn: (...args) => warnings.push(args) }, sessionStorage: storage,
         localStorage: { getItem: () => '{}', setItem() {} },
         document: { title: 'Apps' }, location: { href: 'http://localhost/apps' },
         history: { pushState() {} }, CustomEvent: class {},
@@ -19,12 +21,13 @@ function setup() {
         normalizeUnset: () => [], unsetKeys() {}, _unsetStateId() {},
         _getAttributeValues: async element => element.values,
         _getStateId(values, target) {
+            updates.push({ target, values: JSON.parse(JSON.stringify(values)) });
             if (target === 'offcanvas-app-view') requests.push(JSON.parse(stored)['offcanvas-app-form'].object);
         }
     });
     vm.runInContext(source.slice(source.indexOf('function mergeState('), source.indexOf('function setState(')) +
         source.slice(source.indexOf('async function stateAttributes('), source.indexOf('async function _getAttributeValues(')), context);
-    return { apply: context.stateAttributes, requests };
+    return { apply: context.stateAttributes, requests, warnings, updates, getState: () => JSON.parse(stored) };
 }
 
 function element(attributes, values = {}, children = []) {
@@ -34,14 +37,15 @@ function element(attributes, values = {}, children = []) {
         querySelectorAll: () => children, closest: () => null, dispatchEvent() {} };
 }
 
-for (const json of [false, true]) {
-    test(`source requests see the newly selected app (${json ? 'JSON' : 'nested attributes'})`, async () => {
+for (const format of ['nested attributes', 'JSON', 'evaluated object']) {
+    test(`source requests see the newly selected app (${format})`, async () => {
         const { apply, requests } = setup();
         for (const id of ['first-app', 'second-app']) {
             const view = { src: '/apps/apps/aside.html' };
             const record = { array: 'apps', object: id };
-            const trigger = json
-                ? element({ state: JSON.stringify({ 'offcanvas-app-view': view, 'offcanvas-app-form': record }) })
+            const state = { 'offcanvas-app-view': view, 'offcanvas-app-form': record };
+            const trigger = format !== 'nested attributes'
+                ? element({ state: format === 'JSON' ? JSON.stringify(state) : state })
                 : element({ 'state-to': 'offcanvas-app-view' }, view,
                     [element({ 'state-to': 'offcanvas-app-form' }, record)]);
             await apply(trigger);
@@ -49,3 +53,32 @@ for (const json of [false, true]) {
         assert.deepEqual(requests, ['first-app', 'second-app']);
     });
 }
+
+for (const evaluated of [false, true]) {
+    test(`new conversation reset accepts ${evaluated ? 'an AST-evaluated object' : 'JSON text'}`, async () => {
+        const { apply, warnings, updates, getState } = setup();
+        const state = {
+            'ai-conversation-messages': { 'filter-query-value': '', array: '', $renderValue: { object: [] } },
+            'ai-queue-conversation-filter': { 'filter-query-value': '' },
+            aiChat: { 'conversation-id': '' },
+            'ai-chat-conversation-id': { value: '' },
+            'ai-chat-model': { value: 'openai:gpt-5.4-nano', array: 'ai-conversations', object: '', realtime: 'false' }
+        };
+        await apply(element({ state: evaluated ? state : JSON.stringify(state) }));
+        assert.deepEqual(warnings, []);
+        for (const [id, values] of Object.entries(state)) {
+            assert.deepEqual(getState()[id], values);
+            assert.deepEqual(updates.find(update => update.target === id)?.values, values);
+        }
+    });
+}
+
+test('malformed state JSON still warns without changing stored state', async () => {
+    const { apply, warnings, updates, getState } = setup();
+    const before = getState();
+    await apply(element({ state: '{broken' }));
+    assert.equal(warnings.length, 1);
+    assert.equal(warnings[0][0], 'Invalid state JSON:');
+    assert.deepEqual(updates, []);
+    assert.deepEqual(getState(), before);
+});