@symbo.ls/create 2.10.169 → 2.10.172

package/ferchOnCreate.js

@@ -15,9 +15,8 @@ export const fetchSync = async (key, options) => {
 export const fetchAsync = (app, key, options, callback) => {
   if (key && options.editor) {
     try {
-      if (options.editor.async) fetchStateAsync(key, options, (data) => {
-        app.state.update(data)
-      })
+      const defaultCallback = (data) => app.state.update(data)
+      if (options.editor.async) fetchStateAsync(key, options, callback || defaultCallback)
     } catch (e) {
       console.error(e)
     }

package/index.js

@@ -6,68 +6,48 @@ import { deepMerge, isObject, isString } from '@domql/utils'
 import * as utils from './utilImports'
 import * as uikit from '@symbo.ls/uikit'
 
-import { emotion as defaultEmotion } from '@symbo.ls/emotion'
-
+import { inspectOnKey } from '@symbo.ls/socket-ui'
 import { defaultDefine } from './define'
-import { initRouter } from './router'
+import { initRouter, popStateRouter } from './router'
 import { fetchAsync, fetchSync } from './ferchOnCreate'
 import { initEmotion } from './initEmotion'
+import { applySyncDebug } from './syncExtend'
 
+import DEFAULT_CREATE_OPTIONS from './options'
 import DYNAMIC_JSON from '@symbo.ls/init/dynamic.json'
-const SYMBOLS_KEY = process.env.SYMBOLS_KEY
 
-export const DEFAULT_CREATE_OPTIONS = {
-  editor: {
-    endpoint: 'api.symbols.app'
-  },
-  state: {},
-  pages: {},
-  designSystem: {
-    useReset: true,
-    useVariable: true,
-    useIconSprite: true,
-    useSvgSprite: true,
-    useFontImport: true
-  },
-  components: {},
-  initOptions: {
-    emotion: defaultEmotion
-  },
-  router: {
-    initRouter: true,
-    injectRouterInLinkComponent: true
-  },
-  define: defaultDefine
-}
+const SYMBOLS_KEY = process.env.SYMBOLS_KEY
 
-const mergeWithLocalFile = (options, RC_FILE) => {
-  const rcfile = isObject(RC_FILE) ? RC_FILE : DYNAMIC_JSON || {}
+const mergeWithLocalFile = (options, optionsExternalFile) => {
+  const rcfile = isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
   return deepMerge(options, rcfile)
 }
 
-export const create = async (App, options = DEFAULT_CREATE_OPTIONS, RC_FILE) => {
+export const create = async (App, options = DEFAULT_CREATE_OPTIONS, optionsExternalFile) => {
   const appIsKey = isString(App)
-  options = mergeWithLocalFile(options, RC_FILE)
+  options = mergeWithLocalFile(options, optionsExternalFile)
+
   const key = options.key || SYMBOLS_KEY || (appIsKey ? App : '')
 
   if (appIsKey) App = {}
   await fetchSync(key, options)
 
   const doc = options.parent || options.document || document
-
   const [scratchSystem, emotion, registry] = initEmotion(key, options)
 
-  initRouter(App, options.routerOptions)
+  const router = initRouter(App, options)
 
   const state = options.state || {}
-  const pages =  options.pages || {}
+  const pages = options.pages || {}
   const components = options.components ? { ...uikit, ...options.components } : uikit
   const designSystem = scratchSystem || {}
-  const snippets = { ...utils, ...(options.snippets || {})}
+  const snippets = { ...utils, ...(options.snippets || {}) }
   const define = options.define || defaultDefine
 
+  const extend = applySyncDebug([App], options)
+
   const domqlApp = DOM.create({
-    extend: [App],
+    extend,
     routes: options.pages,
     state,
     context: {
@@ -89,7 +69,10 @@ export const create = async (App, options = DEFAULT_CREATE_OPTIONS, RC_FILE) =>
     ...options.domqlOptions
   })
 
-  fetchAsync(domqlApp)
+  applyKeyDebugListener(domqlApp, options)
+  popStateRouter(domqlApp, options)
+
+  fetchAsync(domqlApp, key, options)
 
   return domqlApp
 }

package/initEmotion.js

@@ -3,7 +3,8 @@
 import { transformDOMQLEmotion } from '@domql/emotion'
 import { emotion as defaultEmotion } from '@symbo.ls/emotion'
 import { init } from '@symbo.ls/init'
-import { DEFAULT_CREATE_OPTIONS } from '.'
+
+import DEFAULT_CREATE_OPTIONS from './options'
 
 export const initEmotion = (key, options = DEFAULT_CREATE_OPTIONS) => {
   const doc = options.parent || options.document || document

package/options.js

@@ -0,0 +1,26 @@
+'use strict'
+
+import { defaultDefine } from './define'
+import { emotion as defaultEmotion } from '@symbo.ls/emotion'
+
+export default {
+  editor: {},
+  state: {},
+  pages: {},
+  designSystem: {
+    useReset: true,
+    useVariable: true,
+    useIconSprite: true,
+    useSvgSprite: true,
+    useFontImport: true
+  },
+  components: {},
+  initOptions: {
+    emotion: defaultEmotion,
+  },
+  router: {
+    initRouter: true,
+    injectRouterInLinkComponent: true
+  },
+  define: defaultDefine
+}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@symbo.ls/create",
-  "version": "2.10.169",
+  "version": "2.10.172",
   "license": "MIT",
-  "gitHead": "f22d3cd31dd7c4521890a8ca730f8a3bee42bfc0",
+  "gitHead": "c5542d156c687366e76194813bf2d5f0227e8396",
   "source": "index.js",
   "main": "index.js",
   "dependencies": {
     "@domql/cookie": "latest",
     "@domql/emotion": "latest",
+    "@domql/env": "latest",
     "@domql/report": "latest",
     "@domql/router": "latest",
     "@domql/utils": "latest",

package/router.js

@@ -1,23 +1,28 @@
 'use strict'
 
-import { router } from '@domql/router'
-import { Link, RouterLink } from 'smbls'
+import { router as defaultRouter } from '@domql/router'
+import { Link, RouterLink } from '@symbo.ls/uikit'
 import { deepMerge } from '@domql/utils'
 
 const DEFAULT_ROUTING_OPTIONS = {
   initRouter: true,
-  injectRouterInLinkComponent: true
+  injectRouterInLinkComponent: true,
+  popState: true
 }
 
-export const initRouter = (root, options = DEFAULT_ROUTING_OPTIONS) => {
-  if (options === false) return
-  if (options === true) options = DEFAULT_ROUTING_OPTIONS
+export const initRouter = (root, options) => {
+  const routerOptions = options.routerOptions || DEFAULT_ROUTING_OPTIONS
+
+  if (routerOptions === false) return
+  if (routerOptions === true) routerOptions = DEFAULT_ROUTING_OPTIONS
+
+  const router = options.snippets && options.snippets.router || defaultRouter
 
   const onRender = (el, s) => {
     if (el.routes) router(el, window.location.pathname, {})
   }
 
-  if (options.initRouter) {
+  if (routerOptions.initRouter) {
     if (root.on) {
       root.on.renderRouter = onRender
     } else {
@@ -27,11 +32,19 @@ export const initRouter = (root, options = DEFAULT_ROUTING_OPTIONS) => {
     }
   }
 
-  if (options.injectRouterInLinkComponent) {
-    injectRouterInLinkComponent(options)
-  }
+  injectRouterInLinkComponent(routerOptions)
+
+  return router
+}
+
+export const popStateRouter = (root, options) => {
+  const routerOptions = options.routerOptions || DEFAULT_ROUTING_OPTIONS
+  if (!routerOptions.popState) return
+  const router = options.snippets && options.snippets.router || defaultRouter
+  window.onpopstate = e => router(root, window.location.pathname, {}, 0, false)
 }
 
-export const injectRouterInLinkComponent = () => {
-  return deepMerge(Link, RouterLink)
+export const injectRouterInLinkComponent = (routerOptions) => {
+  if (routerOptions.injectRouterInLinkComponent)
+    return deepMerge(Link, RouterLink)
 }

package/syncExtend.js

@@ -0,0 +1,18 @@
+'use strict'
+
+import { Sync, DevFocus, inspectOnKey } from '@symbo.ls/socket-ui'
+import { isProduction, isTest } from '@domql/env'
+
+const { NODE_ENV } = process.env
+
+export const applySyncDebug = (extend, options) => {
+  if (options.debug) extend.push[DevFocus]
+  if (options.socket) extend.push[Sync]
+  return extend
+}
+
+export const applyKeyDebugListener = (root, options) => {
+  if (options.debug) inspectOnKey(root)
+}
+
+const extend = isProduction(NODE_ENV) || isTest(NODE_ENV)  [Sync, DevFocus]