smbls 3.2.3 → 3.2.8

package/index.js

@@ -2,14 +2,10 @@
 
 export * from '@domql/utils'
 export * from 'attrs-in-props'
-export * from '@symbo.ls/create'
 export * from 'css-in-props'
 export * from '@symbo.ls/default-config'
 export * from '@symbo.ls/emotion'
-export * from '@symbo.ls/init'
 export * from '@symbo.ls/scratch'
 export * from '@symbo.ls/uikit'
-export * from '@symbo.ls/utils'
-
-// export * from '@symbo.ls/socket/client' // TODO: Check with @nikoloza
-// export * from '@symbo.ls/sync' // TODO: add it soon
+export * from '@symbo.ls/smbls-utils'
+export * from './src/index.js'

package/package.json

@@ -1,35 +1,44 @@
 {
   "name": "smbls",
-  "version": "3.2.3",
+  "version": "3.2.8",
   "license": "MIT",
   "repository": "https://github.com/symbo-ls/smbls",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
   "type": "module",
-  "module": "index.js",
-  "main": "index.js",
-  "unpkg": "dist/iife/index.js",
-  "jsdelivr": "dist/iife/index.js",
+  "module": "./dist/esm/index.js",
+  "main": "./dist/cjs/index.js",
+  "unpkg": "./dist/iife/index.js",
+  "jsdelivr": "./dist/iife/index.js",
   "exports": {
     ".": {
       "import": "./dist/esm/index.js",
       "require": "./dist/cjs/index.js",
+      "browser": "./dist/iife/index.js",
       "default": "./dist/esm/index.js"
     }
   },
+  "bin": {
+    "smbls": "./bin/smbls.js"
+  },
   "source": "index.js",
   "files": [
+    "bin",
+    "dist",
     "*.js",
-    "dist"
+    "src"
   ],
   "dependencies": {
+    "@symbo.ls/emotion": "^3.2.3",
+    "@domql/report": "^3.2.3",
+    "@domql/router": "^3.2.3",
+    "@domql/utils": "^3.2.3",
     "@symbo.ls/cli": "^3.2.3",
-    "@symbo.ls/create": "^3.2.3",
     "@symbo.ls/default-config": "^3.2.3",
-    "@symbo.ls/init": "^3.2.3",
+    "@symbo.ls/fetch": "^3.2.3",
     "@symbo.ls/scratch": "^3.2.3",
     "@symbo.ls/sync": "^3.2.3",
     "@symbo.ls/uikit": "^3.2.3",
-    "@symbo.ls/utils": "^3.2.3",
+    "@symbo.ls/smbls-utils": "^3.2.3",
     "attrs-in-props": "^3.2.3",
     "css-in-props": "^3.2.3",
     "domql": "^3.2.3"
@@ -37,10 +46,12 @@
   "publishConfig": {},
   "scripts": {
     "copy:package:cjs": "cp ../../build/package-cjs.json dist/cjs/package.json",
-    "build:esm": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./index.js --target=es2017 --format=esm --outdir=dist/esm --loader:.svg=text",
-    "build:cjs": "npx cross-env NODE_ENV=$NODE_ENV npx esbuild ./index.js --target=node16 --format=cjs --outdir=dist/cjs --loader:.svg=text",
-    "build:cjs:bundle": "npm run build:cjs --bundle",
-    "build": "npm run build:cjs; npm run build:cjs:bundle --outfile=dist/cjs/index.bundle.js; npm run build:esm;",
-    "prepublish": "rimraf -I dist; npm run build; npm run copy:package:cjs"
-  }
+    "build:esm": "cross-env NODE_ENV=$NODE_ENV esbuild *.js src/*.js --target=es2020 --format=esm --outdir=dist/esm --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build:cjs": "cross-env NODE_ENV=$NODE_ENV esbuild *.js src/*.js --target=node18 --format=cjs --outdir=dist/cjs --define:process.env.NODE_ENV=process.env.NODE_ENV",
+    "build": "node ../../build/build.js",
+    "prepublish": "npm run build && npm run copy:package:cjs",
+    "build:iife": "cross-env NODE_ENV=$NODE_ENV esbuild index.js --bundle --target=es2020 --format=iife --global-name=Smbls --outfile=dist/iife/index.js --define:process.env.NODE_ENV=process.env.NODE_ENV --external:css-in-props --external:@symbo.ls/* --external:@domql/* --external:domql --external:attrs-in-props --external:*.json"
+  },
+  "browser": "./dist/iife/index.js",
+  "sideEffects": false
 }

package/src/createDomql.js

@@ -0,0 +1,107 @@
+'use strict'
+
+import DOM from 'domql'
+import * as uikit from '@symbo.ls/uikit'
+import { CSS_PROPS_REGISTRY } from 'css-in-props'
+
+import { isString, isNode, isObject } from '@domql/utils'
+import { initAnimationFrame } from '@domql/element'
+import { defaultDefine } from './define.js'
+import { initRouter } from './router.js'
+import {
+  initializeExtend,
+  initializeNotifications,
+  initializeSync
+} from './syncExtend.js'
+
+import {
+  prepareComponents,
+  prepareDependencies,
+  prepareDesignSystem,
+  prepareWindow,
+  prepareRequire,
+  preparePages,
+  prepareState,
+  prepareUtils,
+  prepareMethods,
+  prepareSharedLibs,
+  PACKAGE_MANAGER_TO_CDN
+} from './prepare.js'
+
+export const prepareContext = async (app, context = {}) => {
+  const key = (context.key = context.key || (isString(app) ? app : 'smblsapp'))
+  context.define = context.define || defaultDefine
+  context.cssPropsRegistry = CSS_PROPS_REGISTRY
+  context.window = prepareWindow(context)
+
+  if (context.sharedLibraries && context.sharedLibraries.length) {
+    prepareSharedLibs(context)
+  }
+
+  const [scratcDesignSystem, emotion, registry] = prepareDesignSystem(
+    key,
+    context
+  )
+  context.designSystem = scratcDesignSystem
+  context.registry = registry
+  context.emotion = emotion
+  const state = prepareState(app, context)
+  context.state = state
+  context.pages = preparePages(app, context)
+  context.components = prepareComponents(context)
+  context.utils = prepareUtils(context)
+  if (PACKAGE_MANAGER_TO_CDN[context.packageManager]) {
+    context.dependencies = await prepareDependencies(context)
+  }
+  context.methods = prepareMethods(context)
+  context.routerOptions = initRouter(app, context)
+  context.defaultExtends = [uikit.Box]
+  context.snippets = context.snippets || {}
+  context.functions = context.functions || {}
+  return context
+}
+
+export const createDomqlElement = async (app, ctx) => {
+  if (!isObject(ctx)) ctx = {}
+  if (isNode(app)) {
+    app = {}
+    ctx.parent = app
+  } else if (isString(app)) {
+    app = {}
+    ctx.key = app
+  } else if (!isObject(app)) {
+    app = {}
+  }
+
+  await prepareContext(app, ctx)
+
+  app.extends = initializeExtend(app, ctx)
+  app.routes = ctx.pages
+  app.state = ctx.state
+  app.context = ctx
+  app.data = app.data || {}
+  app.data.frameListeners = initAnimationFrame(ctx)
+
+  await prepareRequire(
+    {
+      functions: ctx.functions,
+      utils: ctx.utils,
+      snippets: ctx.snippets,
+      ...ctx.files
+    },
+    ctx
+  )
+
+  initializeSync(app, ctx)
+  // initializeInspect(app, ctx)
+  initializeNotifications(app, ctx)
+
+  const parentNode = ctx.parent || ctx.document.body
+  const domqlCreate = (DOM.default && DOM.default.create) || DOM.create
+  const smblsApp = await domqlCreate(app, parentNode, ctx.key, {
+    verbose: ctx.verbose,
+    ...ctx.domqlOptions
+  })
+
+  return smblsApp
+}

package/src/define.js

@@ -0,0 +1,22 @@
+'use strict'
+
+export const defaultDefine = {
+  routes: param => param,
+  // deps: (param, el) => param || el.parent.deps,
+
+  $router: async (param, el) => {
+    if (!param) return
+
+    const obj = { tag: 'fragment', ...param }
+
+    const set = async () => {
+      await el.set(obj, { preventDefineUpdate: '$router' })
+    }
+
+    if (el.props && el.props.lazyLoad) {
+      window.requestAnimationFrame(set)
+    } else await set()
+
+    return obj
+  }
+}

package/src/fetchOnCreate.js

@@ -0,0 +1,34 @@
+'use strict'
+
+import { isObject } from '@domql/utils'
+import { fetchProject, fetchProjectAsync } from '@symbo.ls/fetch'
+
+export const fetchSync = async (key, options) => {
+  if (key && options.editor) {
+    try {
+      if (!options.editor.async) await fetchProject(key, options)
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}
+
+export const fetchAsync = (app, key, options, callback) => {
+  if (key && options.editor) {
+    try {
+      if (options.editor.async) {
+        fetchProjectAsync(key, options, callback || ((data) => {
+          const designSystem = data.designSystem
+          if (isObject(designSystem)) {
+            options.utils.init(designSystem)
+          }
+          if (isObject(data.state)) {
+            app.state.set(data.state)
+          }
+        }))
+      }
+    } catch (e) {
+      console.error(e)
+    }
+  }
+}

package/src/index.js

@@ -0,0 +1,106 @@
+'use strict'
+
+import { deepMerge, isObject, isUndefined } from '@domql/utils'
+
+import * as utils from './utilImports.js'
+
+import { onpopstateRouter } from './router.js'
+import { fetchAsync, fetchSync } from './fetchOnCreate.js'
+
+import DEFAULT_CREATE_OPTIONS from './options.js'
+import DYNAMIC_JSON from '../dynamic.json' with { type: 'json' }
+import { createDomqlElement } from './createDomql.js'
+
+const mergeWithLocalFile = (options, optionsExternalFile) =>
+  deepMerge(
+    options,
+    isObject(optionsExternalFile) ? optionsExternalFile : DYNAMIC_JSON || {}
+  )
+
+export const create = (
+  App,
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  }
+
+  const domqlApp = createDomqlElement(App, redefinedOptions).then((App) => {
+    onpopstateRouter(App, redefinedOptions)
+
+    if (redefinedOptions.on && redefinedOptions.on.create)
+      redefinedOptions.on.create(
+        domqlApp,
+        domqlApp.state,
+        domqlApp.context,
+        redefinedOptions
+      )
+  })
+
+  return domqlApp
+}
+
+export const createAsync = (
+  App,
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
+  const domqlApp = create(App, options, optionsExternalFile)
+
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  }
+  const key = redefinedOptions.key
+  fetchAsync(domqlApp, key, { utils, ...redefinedOptions })
+
+  return domqlApp
+}
+
+export const createSync = async (
+  App,
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
+  const redefinedOptions = {
+    ...DEFAULT_CREATE_OPTIONS,
+    ...mergeWithLocalFile(options, optionsExternalFile)
+  }
+
+  // const SYMBOLS_KEY = process.env.SYMBOLS_KEY
+  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
+    )
+
+  return domqlApp
+}
+
+export const createSkeleton = (
+  App = {},
+  options = DEFAULT_CREATE_OPTIONS,
+  optionsExternalFile
+) => {
+  return create(
+    {
+      deps: { isUndefined },
+      ...App
+    },
+    deepMerge({ domqlOptions: { onlyResolveExtends: true } }, options),
+    optionsExternalFile
+  )
+}
+
+export default create
+
+export * from './init.js'
+export { DEFAULT_CONTEXT, DESIGN_SYSTEM_OPTIONS, ROUTER_OPTIONS } from './options.js'

package/src/init.js

@@ -0,0 +1,121 @@
+'use strict'
+
+import {
+  set,
+  getActiveConfig,
+  getFontFaceString,
+  appendSVGSprite,
+  appendSvgIconsSprite
+} from '@symbo.ls/scratch'
+
+import { isObject, deepMerge, deepClone } from '@domql/utils'
+
+import { emotion as defaultEmotion } from '@symbo.ls/emotion'
+
+import DYNAMIC_JSON from '../dynamic.json' with { type: 'json' }
+
+const CONFIG = getActiveConfig()
+
+const mergeWithLocalFile = (config = CONFIG, options) => {
+  const rcfile = isObject(options.localFile)
+    ? options.localFile
+    : DYNAMIC_JSON || {}
+  const clonedFile = deepClone(rcfile.designSystem || {})
+  return deepMerge(config, clonedFile)
+}
+
+const SET_OPTIONS = {
+  emotion: defaultEmotion,
+  useVariable: true,
+  useReset: true,
+  useFontImport: true,
+  useIconSprite: true,
+  useDocumentTheme: true,
+  useSvgSprite: true
+}
+
+export const init = (config, options = SET_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion
+  const resultConfig = mergeWithLocalFile(config || {}, options)
+
+  const conf = set(
+    {
+      verbose: options.verbose,
+      useReset: options.useReset,
+      useFontImport: options.useFontImport,
+      useVariable: options.useVariable,
+      useSvgSprite: options.useSvgSprite,
+      useDocumentTheme: options.useDocumentTheme,
+      useIconSprite: options.useIconSprite,
+      useDefaultConfig: options.useDefaultConfig,
+      globalTheme: options.globalTheme,
+      ...resultConfig
+    },
+    { newConfig: options.newConfig }
+  )
+
+  const FontFace = getFontFaceString(conf.FONT)
+
+  const useReset = conf.useReset
+  const useVariable = conf.useVariable
+  const useFontImport = conf.useFontImport
+  const useSvgSprite = conf.useSvgSprite
+  const hasSvgs = config.svg || config.SVG
+  const useIconSprite = conf.useIconSprite
+  const hasIcons = config.icons || config.ICONS
+
+  if (useFontImport) emotion.injectGlobal(FontFace)
+  if (useVariable) emotion.injectGlobal({ ':root': conf.CSS_VARS })
+  if (useReset) emotion.injectGlobal(conf.RESET)
+
+  // Register all ANIMATION entries as global @keyframes
+  if (conf.ANIMATION) {
+    const keyframesCSS = {}
+    for (const name in conf.ANIMATION) {
+      keyframesCSS[`@keyframes ${name}`] = conf.ANIMATION[name]
+    }
+    emotion.injectGlobal(keyframesCSS)
+  }
+
+  if (hasSvgs) appendSVGSprite(hasSvgs, { document: options.document })
+  else if (useSvgSprite)
+    appendSVGSprite(conf.SVG, { document: options.document })
+
+  if (hasIcons) appendSvgIconsSprite(hasIcons, { document: options.document })
+  else if (useIconSprite)
+    appendSvgIconsSprite(conf.ICONS, { document: options.document })
+
+  return conf
+}
+
+const UPDATE_OPTIONS = {
+  emotion: defaultEmotion
+}
+
+export const reinit = (config, options = UPDATE_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion
+  const resultConfig = mergeWithLocalFile(config || {}, options)
+  const conf = set({
+    verbose: false,
+    ...resultConfig
+  })
+  if (!options.preventInject) {
+    emotion.injectGlobal({ ':root': conf.CSS_VARS })
+    emotion.injectGlobal(conf.RESET)
+  }
+  return conf
+}
+
+export const applyCSS = (styles, options = UPDATE_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion
+  emotion.injectGlobal(styles)
+}
+
+export const updateVars = (config, options = UPDATE_OPTIONS) => {
+  const emotion = options.emotion || defaultEmotion
+  emotion.injectGlobal({ ':root': config.CSS_VARS })
+}
+
+export const setClass = (props, options = UPDATE_OPTIONS) => {} // setClassname(props, options.emotion.css)
+
+export { DYNAMIC_JSON }

package/src/options.js

@@ -0,0 +1,37 @@
+'use strict'
+
+import { defaultDefine } from './define.js'
+import { version } from '../package.json' with { type: 'json' }
+
+export const DESIGN_SYSTEM_OPTIONS = {
+  useReset: true,
+  useVariable: true,
+  useIconSprite: true,
+  useSvgSprite: true,
+  useDocumentTheme: true,
+  useDefaultIcons: true,
+  useFontImport: true,
+  useDefaultConfig: true
+}
+
+export const ROUTER_OPTIONS = {
+  initRouter: true,
+  popState: true,
+  injectRouterInLinkComponent: true
+}
+
+export const DEFAULT_CONTEXT = {
+  ...DESIGN_SYSTEM_OPTIONS,
+  router: ROUTER_OPTIONS,
+  version
+}
+
+export const CREATE_OPTIONS = {
+  state: {},
+  pages: {},
+  components: {},
+  router: ROUTER_OPTIONS,
+  define: defaultDefine
+}
+
+export default CREATE_OPTIONS