@symbo.ls/create 2.11.522 → 3.0.1

package/dist/cjs/createDomql.js

@@ -60,8 +60,7 @@ const prepareContext = (app, context = {}) => {
   return context;
 };
 const createDomqlElement = async (app, ctx) => {
-  if (!(0, import_utils.isObject)(ctx))
-    ctx = {};
+  if (!(0, import_utils.isObject)(ctx)) ctx = {};
   if ((0, import_utils.isNode)(app)) {
     app = {};
     ctx.parent = app;
@@ -74,7 +73,7 @@ const createDomqlElement = async (app, ctx) => {
     app = {};
   }
   prepareContext(app, ctx);
-  app.extend = (0, import_syncExtend.initializeExtend)(app, ctx);
+  app.extends = (0, import_syncExtend.initializeExtend)(app, ctx);
   app.routes = ctx.pages;
   app.state = ctx.state;
   app.context = ctx;

package/dist/cjs/define.js

@@ -21,25 +21,18 @@ __export(define_exports, {
   defaultDefine: () => defaultDefine
 });
 module.exports = __toCommonJS(define_exports);
-var import_atoms = require("@symbo.ls/atoms");
 const defaultDefine = {
   routes: (param) => param,
   // deps: (param, el) => param || el.parent.deps,
-  $router: (param, el) => {
-    if (!param)
-      return;
+  $router: async (param, el) => {
+    if (!param) return;
     const obj = { tag: "fragment", ...param };
-    const set = () => {
-      el.set(obj, { preventDefineUpdate: "$router" });
+    const set = async () => {
+      await el.set(obj, { preventDefineUpdate: "$router" });
     };
     if (el.props && el.props.lazyLoad) {
       window.requestAnimationFrame(set);
-    } else
-      set();
+    } else await set();
     return obj;
-  },
-  $collection: import_atoms.Collection.define.$collection,
-  $setCollection: import_atoms.Collection.define.$setCollection,
-  $stateCollection: import_atoms.Collection.define.$stateCollection,
-  $propsCollection: import_atoms.Collection.define.$propsCollection
+  }
 };

package/dist/cjs/ferchOnCreate.js

@@ -27,8 +27,7 @@ var import_fetch = require("@symbo.ls/fetch");
 const fetchSync = async (key, options) => {
   if (key && options.editor) {
     try {
-      if (!options.editor.async)
-        await (0, import_fetch.fetchProject)(key, options);
+      if (!options.editor.async) await (0, import_fetch.fetchProject)(key, options);
     } catch (e) {
       console.error(e);
     }

package/dist/cjs/index.js

@@ -26,15 +26,15 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   create: () => create,
   createAsync: () => createAsync,
   createSkeleton: () => createSkeleton,
   createSync: () => createSync,
-  default: () => src_default
+  default: () => index_default
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 var import_utils = require("@domql/utils");
 var utils = __toESM(require("./utilImports"), 1);
 var import_router = require("./router");
@@ -50,8 +50,7 @@ const create = (App, options = import_options.default, optionsExternalFile) => {
   const redefinedOptions = { ...import_options.default, ...mergeWithLocalFile(options, optionsExternalFile) };
   const domqlApp = (0, import_createDomql.createDomqlElement)(App, redefinedOptions);
   (0, import_router.popStateRouter)(domqlApp, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create)
-    redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create) redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
   return domqlApp;
 };
 const createAsync = (App, options = import_options.default, optionsExternalFile) => {
@@ -66,8 +65,7 @@ const createSync = async (App, options = import_options.default, optionsExternal
   const key = options.key;
   await (0, import_ferchOnCreate.fetchSync)(key, redefinedOptions);
   const domqlApp = await (0, import_createDomql.createDomqlElement)(App, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create)
-    await redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create) await redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
   return domqlApp;
 };
 const createSkeleton = (App = {}, options = import_options.default, optionsExternalFile) => {
@@ -80,4 +78,4 @@ const createSkeleton = (App = {}, options = import_options.default, optionsExter
     optionsExternalFile
   );
 };
-var src_default = create;
+var index_default = create;

package/dist/cjs/initEmotion.js

@@ -32,8 +32,7 @@ const initEmotion = (key, options = {}) => {
   const doc = options.parent || options.document || document;
   const initOptions = options.initOptions || {};
   const emotion = initOptions.emotion;
-  if (!initOptions.emotion)
-    initOptions.emotion = import_emotion2.emotion;
+  if (!initOptions.emotion) initOptions.emotion = import_emotion2.emotion;
   const registry = options.registry || (0, import_emotion.transformDOMQLEmotion)(initOptions.emotion, options);
   const designSystem = initOptions.useDefaultConfig || ((_a = options.designSystem) == null ? void 0 : _a.useDefaultConfig) ? (0, import_utils.deepMerge)(options.designSystem, (0, import_utils.deepClone)(import_default_config.DEFAULT_CONFIG)) : options.designSystem || (0, import_utils.deepClone)(import_default_config.DEFAULT_CONFIG);
   const scratchSystem = (0, import_init.init)(designSystem, {

package/dist/cjs/prepare.js

@@ -47,11 +47,9 @@ var utils = __toESM(require("./utilImports"), 1);
 var routerUtils = __toESM(require("@domql/router"), 1);
 const ENV = "development";
 const prepareWindow = (context) => {
-  if (typeof window === "undefined")
-    window = globalThis || {};
+  if (typeof window === "undefined") window = globalThis || {};
   if (typeof document === "undefined") {
-    if (!window.document)
-      window.document = globalThis.document || { body: {} };
+    if (!window.document) window.document = globalThis.document || { body: {} };
     document = window.document;
   }
   context.document = context.document || document;
@@ -64,7 +62,7 @@ const UIkitWithPrefix = () => {
   const newObj = {};
   for (const key in uikit) {
     if (Object.prototype.hasOwnProperty.call(uikit, key)) {
-      if ((0, import_utils.checkIfKeyIsComponent)(key)) {
+      if ((0, import_utils.matchesComponentNaming)(key)) {
         newObj[`smbls.${key}`] = uikit[key];
       } else {
         newObj[key] = uikit[key];
@@ -108,11 +106,9 @@ const prepareDependencies = ({
     if (dependency.split("/").length > 2 || !onlyDotsAndNumbers(version)) {
       url = `https://pkg.symbo.ls/${dependency}${random}`;
     }
-    if (dependenciesOnDemand && dependenciesOnDemand[dependency])
-      continue;
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) continue;
     try {
-      if (cachedDeps[dependency])
-        return;
+      if (cachedDeps[dependency]) return;
       cachedDeps[dependency] = true;
       utils.loadJavascriptFileEmbedSync(url, document2);
     } catch (e) {
@@ -126,8 +122,7 @@ const prepareRequire = (packages, ctx) => {
   const initRequire = (ctx2) => (key) => {
     const windowOpts2 = ctx2.window || window;
     const pkg = windowOpts2.packages[key];
-    if (typeof pkg === "function")
-      return pkg();
+    if (typeof pkg === "function") return pkg();
     return pkg;
   };
   const initRequireOnDemand = (ctx2) => (key) => {
@@ -169,10 +164,8 @@ const prepareDesignSystem = (key, context) => {
 };
 const prepareState = (app, context) => {
   const state = {};
-  if (context.state)
-    utils.deepMerge(state, context.state);
-  if (app && app.state)
-    (0, import_utils.deepMerge)(state, app.state);
+  if (context.state) utils.deepMerge(state, context.state);
+  if (app && app.state) (0, import_utils.deepMerge)(state, app.state);
   return (0, import_utils.deepClone)(state);
 };
 const preparePages = (app, context) => {

package/dist/cjs/router.js

@@ -32,21 +32,17 @@ const DEFAULT_ROUTING_OPTIONS = {
   popState: true
 };
 const initRouter = (element, context) => {
-  if (context.router === false)
-    return;
-  else if (context.router === true)
-    context.router = DEFAULT_ROUTING_OPTIONS;
-  else
-    (0, import_utils.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS);
+  if (context.router === false) return;
+  else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS;
+  else (0, import_utils.merge)(context.router || {}, DEFAULT_ROUTING_OPTIONS);
   const routerOptions = context.router;
   const router = context.utils && context.utils.router ? context.utils.router : import_router.router;
   const onRouterRenderDefault = (el, s) => {
     const { pathname, search, hash } = import_utils.window.location;
     const url = pathname + search + hash;
-    if (el.routes)
-      router(url, el, {}, { initialRender: true });
+    if (el.routes) router(url, el, {}, { initialRender: true });
   };
-  const hasRenderRouter = element.on && !(0, import_utils.isUndefined)(element.on.renderRouter);
+  const hasRenderRouter = element.on && !(0, import_utils.isUndefined)(element.on.renderRouter) || !(0, import_utils.isUndefined)(element.onRenderRouter);
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
     if (element.on) {
       element.on.renderRouter = onRouterRenderDefault;
@@ -61,12 +57,10 @@ const initRouter = (element, context) => {
 };
 let popStateFired;
 const popStateRouter = (element, context) => {
-  if (popStateFired)
-    return;
+  if (popStateFired) return;
   popStateFired = true;
   const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
-  if (!routerOptions.popState)
-    return;
+  if (!routerOptions.popState) return;
   const router = context.utils && context.utils.router ? context.utils.router : import_router.router;
   import_utils.window.onpopstate = (e) => {
     const { pathname, search, hash } = import_utils.window.location;

package/dist/cjs/syncExtend.js

@@ -27,50 +27,44 @@ module.exports = __toCommonJS(syncExtend_exports);
 var import_utils = require("@domql/utils");
 var import_sync = require("@symbo.ls/sync");
 const initializeExtend = (app, ctx) => {
-  return (0, import_utils.isObjectLike)(app.extend) ? app.extend : [];
+  return (0, import_utils.isObjectLike)(app.extends) ? app.extends : [];
 };
 const initializeSync = (app, ctx) => {
   const { editor } = ctx;
-  if (!editor)
-    return;
+  if (!editor) return;
   const liveSync = (0, import_utils.isUndefined)(editor.liveSync) ? (0, import_utils.isDevelopment)() : editor.liveSync;
   if (liveSync) {
-    if ((0, import_utils.isArray)(app.extend))
-      app.extend.push(import_sync.SyncComponent);
-    else if (app.extend) {
-      app.extend = [app.extend, import_sync.SyncComponent];
+    if ((0, import_utils.isArray)(app.extends)) app.extends.push(import_sync.SyncComponent);
+    else if (app.extends) {
+      app.extends = [app.extends, import_sync.SyncComponent];
     } else {
-      app.extend = [import_sync.SyncComponent];
+      app.extends = [import_sync.SyncComponent];
     }
   }
 };
 const initializeInspect = (app, ctx) => {
   const { editor } = ctx;
-  if (!editor)
-    return;
+  if (!editor) return;
   const inspect = (0, import_utils.isUndefined)(editor.inspect) ? (0, import_utils.isDevelopment)() : editor.inspect;
   if (inspect) {
-    if ((0, import_utils.isArray)(app.extend))
-      app.extend.push(import_sync.Inspect);
-    else if (app.extend) {
-      app.extend = [app.extend, import_sync.Inspect];
+    if ((0, import_utils.isArray)(app.extends)) app.extends.push(import_sync.Inspect);
+    else if (app.extends) {
+      app.extends = [app.extends, import_sync.Inspect];
     } else {
-      app.extend = [import_sync.Inspect];
+      app.extends = [import_sync.Inspect];
     }
   }
 };
 const initializeNotifications = (app, ctx) => {
   const { editor } = ctx;
-  if (!editor)
-    return;
+  if (!editor) return;
   const verbose = (0, import_utils.isUndefined)(editor.verbose) ? (0, import_utils.isDevelopment)() || ctx.verbose : editor.verbose;
   if (verbose) {
-    if ((0, import_utils.isArray)(app.extend))
-      app.extend.push(import_sync.Notifications);
-    else if (app.extend) {
-      app.extend = [app.extend, import_sync.Notifications];
+    if ((0, import_utils.isArray)(app.extends)) app.extends.push(import_sync.Notifications);
+    else if (app.extends) {
+      app.extends = [app.extends, import_sync.Notifications];
     } else {
-      app.extend = [import_sync.Notifications];
+      app.extends = [import_sync.Notifications];
     }
   }
 };

package/dist/esm/createDomql.js

@@ -52,8 +52,7 @@ const prepareContext = (app, context = {}) => {
   return context;
 };
 const createDomqlElement = async (app, ctx) => {
-  if (!isObject(ctx))
-    ctx = {};
+  if (!isObject(ctx)) ctx = {};
   if (isNode(app)) {
     app = {};
     ctx.parent = app;
@@ -66,7 +65,7 @@ const createDomqlElement = async (app, ctx) => {
     app = {};
   }
   prepareContext(app, ctx);
-  app.extend = initializeExtend(app, ctx);
+  app.extends = initializeExtend(app, ctx);
   app.routes = ctx.pages;
   app.state = ctx.state;
   app.context = ctx;

package/dist/esm/define.js

@@ -14,27 +14,20 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { Collection } from "@symbo.ls/atoms";
 const defaultDefine = {
   routes: (param) => param,
   // deps: (param, el) => param || el.parent.deps,
-  $router: (param, el) => {
-    if (!param)
-      return;
+  $router: async (param, el) => {
+    if (!param) return;
     const obj = __spreadValues({ tag: "fragment" }, param);
-    const set = () => {
-      el.set(obj, { preventDefineUpdate: "$router" });
+    const set = async () => {
+      await el.set(obj, { preventDefineUpdate: "$router" });
     };
     if (el.props && el.props.lazyLoad) {
       window.requestAnimationFrame(set);
-    } else
-      set();
+    } else await set();
     return obj;
-  },
-  $collection: Collection.define.$collection,
-  $setCollection: Collection.define.$setCollection,
-  $stateCollection: Collection.define.$stateCollection,
-  $propsCollection: Collection.define.$propsCollection
+  }
 };
 export {
   defaultDefine

package/dist/esm/ferchOnCreate.js

@@ -3,8 +3,7 @@ import { fetchProject, fetchProjectAsync } from "@symbo.ls/fetch";
 const fetchSync = async (key, options) => {
   if (key && options.editor) {
     try {
-      if (!options.editor.async)
-        await fetchProject(key, options);
+      if (!options.editor.async) await fetchProject(key, options);
     } catch (e) {
       console.error(e);
     }

package/dist/esm/index.js

@@ -29,8 +29,7 @@ const create = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
   const redefinedOptions = __spreadValues(__spreadValues({}, DEFAULT_CREATE_OPTIONS), mergeWithLocalFile(options, optionsExternalFile));
   const domqlApp = createDomqlElement(App, redefinedOptions);
   popStateRouter(domqlApp, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create)
-    redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create) redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
   return domqlApp;
 };
 const createAsync = (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
@@ -45,8 +44,7 @@ const createSync = async (App, options = DEFAULT_CREATE_OPTIONS, optionsExternal
   const key = options.key;
   await fetchSync(key, redefinedOptions);
   const domqlApp = await createDomqlElement(App, redefinedOptions);
-  if (redefinedOptions.on && redefinedOptions.on.create)
-    await redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
+  if (redefinedOptions.on && redefinedOptions.on.create) await redefinedOptions.on.create(domqlApp, domqlApp.state, domqlApp.context, redefinedOptions);
   return domqlApp;
 };
 const createSkeleton = (App = {}, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
@@ -58,11 +56,11 @@ const createSkeleton = (App = {}, options = DEFAULT_CREATE_OPTIONS, optionsExter
     optionsExternalFile
   );
 };
-var src_default = create;
+var index_default = create;
 export {
   create,
   createAsync,
   createSkeleton,
   createSync,
-  src_default as default
+  index_default as default
 };

package/dist/esm/initEmotion.js

@@ -25,8 +25,7 @@ const initEmotion = (key, options = {}) => {
   const doc = options.parent || options.document || document;
   const initOptions = options.initOptions || {};
   const emotion = initOptions.emotion;
-  if (!initOptions.emotion)
-    initOptions.emotion = defaultEmotion;
+  if (!initOptions.emotion) initOptions.emotion = defaultEmotion;
   const registry = options.registry || transformDOMQLEmotion(initOptions.emotion, options);
   const designSystem = initOptions.useDefaultConfig || ((_a = options.designSystem) == null ? void 0 : _a.useDefaultConfig) ? deepMerge(options.designSystem, deepClone(DEFAULT_CONFIG)) : options.designSystem || deepClone(DEFAULT_CONFIG);
   const scratchSystem = init(designSystem, __spreadValues(__spreadValues({

package/dist/esm/prepare.js

@@ -22,7 +22,7 @@ import {
   deepMerge,
   deepClone,
   merge,
-  checkIfKeyIsComponent
+  matchesComponentNaming
 } from "@domql/utils";
 import { initEmotion } from "./initEmotion";
 import * as uikit from "@symbo.ls/uikit";
@@ -30,11 +30,9 @@ import * as utils from "./utilImports";
 import * as routerUtils from "@domql/router";
 const ENV = "development";
 const prepareWindow = (context) => {
-  if (typeof window === "undefined")
-    window = globalThis || {};
+  if (typeof window === "undefined") window = globalThis || {};
   if (typeof document === "undefined") {
-    if (!window.document)
-      window.document = globalThis.document || { body: {} };
+    if (!window.document) window.document = globalThis.document || { body: {} };
     document = window.document;
   }
   context.document = context.document || document;
@@ -47,7 +45,7 @@ const UIkitWithPrefix = () => {
   const newObj = {};
   for (const key in uikit) {
     if (Object.prototype.hasOwnProperty.call(uikit, key)) {
-      if (checkIfKeyIsComponent(key)) {
+      if (matchesComponentNaming(key)) {
         newObj[`smbls.${key}`] = uikit[key];
       } else {
         newObj[key] = uikit[key];
@@ -90,11 +88,9 @@ const prepareDependencies = ({
     if (dependency.split("/").length > 2 || !onlyDotsAndNumbers(version)) {
       url = `https://pkg.symbo.ls/${dependency}${random}`;
     }
-    if (dependenciesOnDemand && dependenciesOnDemand[dependency])
-      continue;
+    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) continue;
     try {
-      if (cachedDeps[dependency])
-        return;
+      if (cachedDeps[dependency]) return;
       cachedDeps[dependency] = true;
       utils.loadJavascriptFileEmbedSync(url, document2);
     } catch (e) {
@@ -108,8 +104,7 @@ const prepareRequire = (packages, ctx) => {
   const initRequire = (ctx2) => (key) => {
     const windowOpts2 = ctx2.window || window;
     const pkg = windowOpts2.packages[key];
-    if (typeof pkg === "function")
-      return pkg();
+    if (typeof pkg === "function") return pkg();
     return pkg;
   };
   const initRequireOnDemand = (ctx2) => (key) => {
@@ -151,10 +146,8 @@ const prepareDesignSystem = (key, context) => {
 };
 const prepareState = (app, context) => {
   const state = {};
-  if (context.state)
-    utils.deepMerge(state, context.state);
-  if (app && app.state)
-    deepMerge(state, app.state);
+  if (context.state) utils.deepMerge(state, context.state);
+  if (app && app.state) deepMerge(state, app.state);
   return deepClone(state);
 };
 const preparePages = (app, context) => {

package/dist/esm/router.js

@@ -7,21 +7,17 @@ const DEFAULT_ROUTING_OPTIONS = {
   popState: true
 };
 const initRouter = (element, context) => {
-  if (context.router === false)
-    return;
-  else if (context.router === true)
-    context.router = DEFAULT_ROUTING_OPTIONS;
-  else
-    merge(context.router || {}, DEFAULT_ROUTING_OPTIONS);
+  if (context.router === false) return;
+  else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS;
+  else merge(context.router || {}, DEFAULT_ROUTING_OPTIONS);
   const routerOptions = context.router;
   const router = context.utils && context.utils.router ? context.utils.router : defaultRouter;
   const onRouterRenderDefault = (el, s) => {
     const { pathname, search, hash } = window.location;
     const url = pathname + search + hash;
-    if (el.routes)
-      router(url, el, {}, { initialRender: true });
+    if (el.routes) router(url, el, {}, { initialRender: true });
   };
-  const hasRenderRouter = element.on && !isUndefined(element.on.renderRouter);
+  const hasRenderRouter = element.on && !isUndefined(element.on.renderRouter) || !isUndefined(element.onRenderRouter);
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
     if (element.on) {
       element.on.renderRouter = onRouterRenderDefault;
@@ -36,12 +32,10 @@ const initRouter = (element, context) => {
 };
 let popStateFired;
 const popStateRouter = (element, context) => {
-  if (popStateFired)
-    return;
+  if (popStateFired) return;
   popStateFired = true;
   const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS;
-  if (!routerOptions.popState)
-    return;
+  if (!routerOptions.popState) return;
   const router = context.utils && context.utils.router ? context.utils.router : defaultRouter;
   window.onpopstate = (e) => {
     const { pathname, search, hash } = window.location;

package/dist/esm/syncExtend.js

@@ -1,50 +1,44 @@
 import { isObjectLike, isUndefined, isDevelopment, isArray } from "@domql/utils";
 import { SyncComponent, Inspect, Notifications } from "@symbo.ls/sync";
 const initializeExtend = (app, ctx) => {
-  return isObjectLike(app.extend) ? app.extend : [];
+  return isObjectLike(app.extends) ? app.extends : [];
 };
 const initializeSync = (app, ctx) => {
   const { editor } = ctx;
-  if (!editor)
-    return;
+  if (!editor) return;
   const liveSync = isUndefined(editor.liveSync) ? isDevelopment() : editor.liveSync;
   if (liveSync) {
-    if (isArray(app.extend))
-      app.extend.push(SyncComponent);
-    else if (app.extend) {
-      app.extend = [app.extend, SyncComponent];
+    if (isArray(app.extends)) app.extends.push(SyncComponent);
+    else if (app.extends) {
+      app.extends = [app.extends, SyncComponent];
     } else {
-      app.extend = [SyncComponent];
+      app.extends = [SyncComponent];
     }
   }
 };
 const initializeInspect = (app, ctx) => {
   const { editor } = ctx;
-  if (!editor)
-    return;
+  if (!editor) return;
   const inspect = isUndefined(editor.inspect) ? isDevelopment() : editor.inspect;
   if (inspect) {
-    if (isArray(app.extend))
-      app.extend.push(Inspect);
-    else if (app.extend) {
-      app.extend = [app.extend, Inspect];
+    if (isArray(app.extends)) app.extends.push(Inspect);
+    else if (app.extends) {
+      app.extends = [app.extends, Inspect];
     } else {
-      app.extend = [Inspect];
+      app.extends = [Inspect];
     }
   }
 };
 const initializeNotifications = (app, ctx) => {
   const { editor } = ctx;
-  if (!editor)
-    return;
+  if (!editor) return;
   const verbose = isUndefined(editor.verbose) ? isDevelopment() || ctx.verbose : editor.verbose;
   if (verbose) {
-    if (isArray(app.extend))
-      app.extend.push(Notifications);
-    else if (app.extend) {
-      app.extend = [app.extend, Notifications];
+    if (isArray(app.extends)) app.extends.push(Notifications);
+    else if (app.extends) {
+      app.extends = [app.extends, Notifications];
     } else {
-      app.extend = [Notifications];
+      app.extends = [Notifications];
     }
   }
 };

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.11.522",
+  "version": "3.0.1",
   "license": "MIT",
-  "gitHead": "f0cf0f8e16c7cac278886a322e85cb8d8188ca24",
+  "gitHead": "a4e7f586f7e4f60bd7b6a8388bdacc3ae1879433",
   "type": "module",
   "module": "src/index.js",
   "main": "src/index.js",
@@ -33,12 +33,12 @@
     "@domql/event": "^2.5.0",
     "@domql/report": "^2.5.0",
     "@domql/router": "^2.5.0",
-    "@symbo.ls/fetch": "^2.11.511",
-    "@symbo.ls/init": "^2.11.522",
-    "@symbo.ls/scratch": "^2.11.522",
-    "@symbo.ls/sync": "^2.11.522",
-    "@symbo.ls/uikit": "^2.11.522",
-    "@symbo.ls/utils": "^2.11.512",
+    "@symbo.ls/fetch": "^3.0.1",
+    "@symbo.ls/init": "^3.0.1",
+    "@symbo.ls/scratch": "^3.0.1",
+    "@symbo.ls/sync": "^3.0.1",
+    "@symbo.ls/uikit": "^3.0.1",
+    "@symbo.ls/utils": "^3.0.1",
     "domql": "^2.5.158"
   },
   "devDependencies": {

package/src/createDomql.js

@@ -58,7 +58,7 @@ export const createDomqlElement = async (app, ctx) => {
 
   prepareContext(app, ctx)
 
-  app.extend = initializeExtend(app, ctx)
+  app.extends = initializeExtend(app, ctx)
   app.routes = ctx.pages
   app.state = ctx.state
   app.context = ctx

package/src/define.js

@@ -1,29 +1,22 @@
 'use strict'
 
-import { Collection } from '@symbo.ls/atoms'
-
 export const defaultDefine = {
   routes: param => param,
   // deps: (param, el) => param || el.parent.deps,
 
-  $router: (param, el) => {
+  $router: async (param, el) => {
     if (!param) return
 
     const obj = { tag: 'fragment', ...param }
 
-    const set = () => {
-      el.set(obj, { preventDefineUpdate: '$router' })
+    const set = async () => {
+      await el.set(obj, { preventDefineUpdate: '$router' })
     }
 
     if (el.props && el.props.lazyLoad) {
       window.requestAnimationFrame(set)
-    } else set()
+    } else await set()
 
     return obj
-  },
-
-  $collection: Collection.define.$collection,
-  $setCollection: Collection.define.$setCollection,
-  $stateCollection: Collection.define.$stateCollection,
-  $propsCollection: Collection.define.$propsCollection
+  }
 }

package/src/prepare.js

@@ -5,7 +5,7 @@ import {
   deepMerge,
   deepClone,
   merge,
-  checkIfKeyIsComponent
+  matchesComponentNaming
 } from '@domql/utils'
 import { initEmotion } from './initEmotion'
 
@@ -33,7 +33,7 @@ export const UIkitWithPrefix = () => {
   const newObj = {}
   for (const key in uikit) {
     if (Object.prototype.hasOwnProperty.call(uikit, key)) {
-      if (checkIfKeyIsComponent(key)) {
+      if (matchesComponentNaming(key)) {
         newObj[`smbls.${key}`] = uikit[key]
       } else {
         newObj[key] = uikit[key]

package/src/router.js

@@ -24,7 +24,9 @@ export const initRouter = (element, context) => {
     if (el.routes) router(url, el, {}, { initialRender: true })
   }
 
-  const hasRenderRouter = element.on && !isUndefined(element.on.renderRouter)
+  // console.log(element)
+  // debugger
+  const hasRenderRouter = (element.on && !isUndefined(element.on.renderRouter)) || !isUndefined(element.onRenderRouter) // || element.on.renderRouter
   if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
     if (element.on) {
       element.on.renderRouter = onRouterRenderDefault

package/src/syncExtend.js

@@ -4,7 +4,7 @@ import { isObjectLike, isUndefined, isDevelopment, isArray } from '@domql/utils'
 import { SyncComponent, Inspect, Notifications } from '@symbo.ls/sync'
 
 export const initializeExtend = (app, ctx) => {
-  return isObjectLike(app.extend) ? app.extend : []
+  return isObjectLike(app.extends) ? app.extends : []
 }
 
 export const initializeSync = (app, ctx) => {
@@ -12,11 +12,11 @@ export const initializeSync = (app, ctx) => {
   if (!editor) return
   const liveSync = isUndefined(editor.liveSync) ? isDevelopment() : editor.liveSync
   if (liveSync) {
-    if (isArray(app.extend)) app.extend.push(SyncComponent)
-    else if (app.extend) {
-      app.extend = [app.extend, SyncComponent]
+    if (isArray(app.extends)) app.extends.push(SyncComponent)
+    else if (app.extends) {
+      app.extends = [app.extends, SyncComponent]
     } else {
-      app.extend = [SyncComponent]
+      app.extends = [SyncComponent]
     }
   }
 }
@@ -26,11 +26,11 @@ export const initializeInspect = (app, ctx) => {
   if (!editor) return
   const inspect = isUndefined(editor.inspect) ? isDevelopment() : editor.inspect
   if (inspect) {
-    if (isArray(app.extend)) app.extend.push(Inspect)
-    else if (app.extend) {
-      app.extend = [app.extend, Inspect]
+    if (isArray(app.extends)) app.extends.push(Inspect)
+    else if (app.extends) {
+      app.extends = [app.extends, Inspect]
     } else {
-      app.extend = [Inspect]
+      app.extends = [Inspect]
     }
   }
 }
@@ -40,11 +40,11 @@ export const initializeNotifications = (app, ctx) => {
   if (!editor) return
   const verbose = isUndefined(editor.verbose) ? isDevelopment() || ctx.verbose : editor.verbose
   if (verbose) {
-    if (isArray(app.extend)) app.extend.push(Notifications)
-    else if (app.extend) {
-      app.extend = [app.extend, Notifications]
+    if (isArray(app.extends)) app.extends.push(Notifications)
+    else if (app.extends) {
+      app.extends = [app.extends, Notifications]
     } else {
-      app.extend = [Notifications]
+      app.extends = [Notifications]
     }
   }
 }