smbls 3.14.2 → 3.14.6

package/src/prepare.js

@@ -1,526 +0,0 @@
-'use strict'
-
-import {
-  isObject,
-  deepMerge,
-  deepClone,
-  merge,
-  isDevelopment,
-  matchesComponentNaming,
-  mergeSharedLibraries,
-  PACKAGE_MANAGER_TO_CDN,
-  getCdnProviderFromConfig,
-  getCDNUrl
-} from '@symbo.ls/utils'
-import { css, injectGlobal } from '@symbo.ls/css'
-import { DEFAULT_CONFIG } from '@symbo.ls/default-config'
-import { init } from './init.js'
-import { getActiveConfig, createConfig, pushConfig, popConfig } from '@symbo.ls/scratch'
-import { DEFAULT_CONTEXT } from './options.js'
-
-// FT-FRAMEWORK-1: source from the explicit COMPONENTS manifest, not from
-// `import * as uikit`. Parcel under `sideEffects: false` was pruning entries
-// off the namespace import — projects ended up with atoms missing from
-// `context.components`. The manifest is a plain object literal so the
-// bundler can't mistake any entry for an unused import.
-import { COMPONENTS as uikit } from '@symbo.ls/default-config/components'
-import * as utils from './utilImports.js'
-import * as routerUtils from '@symbo.ls/router'
-
-// Re-export so existing consumers still find them here
-export { PACKAGE_MANAGER_TO_CDN, getCdnProviderFromConfig, getCDNUrl }
-
-// @preserve-env
-
-export const prepareWindow = (context) => {
-  const win = typeof window !== 'undefined' ? window : globalThis || {}
-  if (!win.document) win.document = { body: {} }
-  const doc = typeof document !== 'undefined' ? document : win.document
-  context.document = context.document || doc
-  context.window = context.window || win
-  return context.window
-}
-
-const UIkitWithPrefix = (prefix = 'smbls') => {
-  const newObj = {}
-  for (const key in uikit) {
-    if (Object.prototype.hasOwnProperty.call(uikit, key)) {
-      if (matchesComponentNaming(key)) {
-        newObj[`smbls.${key}`] = uikit[key]
-      } else {
-        newObj[key] = uikit[key]
-      }
-    }
-  }
-  return newObj
-}
-
-export const prepareComponents = (context) => {
-  return context.components
-    ? { ...UIkitWithPrefix(), ...context.components }
-    : UIkitWithPrefix()
-}
-
-export const prepareUtils = (context) => {
-  return {
-    ...utils,
-    ...routerUtils,
-    ...utils.scratchUtils,
-    ...context.utils,
-    ...context.snippets,
-    ...context.functions
-  }
-}
-
-export const prepareMethods = (context) => {
-  return {
-    ...(context.methods || {}),
-    require: context.utils.require,
-    requireOnDemand: context.utils.requireOnDemand,
-    router: context.utils.router
-  }
-}
-
-const cachedDeps = {}
-export const prepareDependencies = async ({
-  dependencies,
-  dependenciesOnDemand,
-  document,
-  preventCaching = false,
-  cdnProvider,
-  packageManager,
-  symbolsConfig
-}) => {
-  // Derive provider from packageManager or symbolsConfig when not explicitly passed
-  if (!cdnProvider) {
-    cdnProvider =
-      PACKAGE_MANAGER_TO_CDN[packageManager] ||
-      getCdnProviderFromConfig(symbolsConfig) ||
-      'esmsh'
-  }
-  if (!dependencies) return null
-  let hasAny = false
-  for (const _k in dependencies) {
-    hasAny = true
-    break
-  } // eslint-disable-line
-  if (!hasAny) return null
-
-  for (const dependency in dependencies) {
-    const version = dependencies[dependency]
-    if (dependenciesOnDemand && dependenciesOnDemand[dependency]) {
-      continue
-    }
-
-    const random = isDevelopment() && preventCaching ? `?${Math.random()}` : ''
-    const url = getCDNUrl(dependency, version, cdnProvider) + random
-
-    try {
-      if (cachedDeps[dependency]) continue
-      cachedDeps[dependency] = true
-      await Promise.race([
-        utils.loadRemoteScript(url, { document, type: 'module' }),
-        new Promise((_, r) => setTimeout(() => r(new Error(`Timeout loading ${dependency}`)), 10000))
-      ])
-    } catch (e) {
-      console.error(`Failed to load ${dependency} from ${cdnProvider}:`, e)
-
-      if (cdnProvider !== 'symbols') {
-        try {
-          const fallbackUrl = getCDNUrl(dependency, version, 'symbols') + random
-          await Promise.race([
-            utils.loadRemoteScript(fallbackUrl, { document }),
-            new Promise((_, r) => setTimeout(() => r(new Error(`Timeout fallback ${dependency}`)), 10000))
-          ])
-          console.log(
-            `Successfully loaded ${dependency} from fallback (symbols.ls)`
-          )
-        } catch (fallbackError) {
-          console.error(
-            `Failed to load ${dependency} from fallback:`,
-            fallbackError
-          )
-        }
-      }
-    }
-  }
-
-  return dependencies
-}
-
-export const prepareRequire = async (packages, ctx) => {
-  const windowOpts = ctx.window || window
-  const defaultProvider =
-    ctx.cdnProvider || getCdnProviderFromConfig(ctx.symbolsConfig) || 'esmsh'
-
-  const initRequire = async (ctx) => async (key, provider) => {
-    const windowOpts = ctx.window || window
-    const pkg = windowOpts.packages[key]
-    if (typeof pkg === 'function') return pkg()
-    return pkg
-  }
-
-  const initRequireOnDemand =
-    async (ctx) =>
-    async (key, provider = defaultProvider) => {
-      const { dependenciesOnDemand } = ctx
-      const documentOpts = ctx.document || document
-      const windowOpts = ctx.window || window
-      if (!windowOpts.packages[key]) {
-        const random = isDevelopment() ? `?${Math.random()}` : ''
-        if (dependenciesOnDemand && dependenciesOnDemand[key]) {
-          const version = dependenciesOnDemand[key]
-          const url = getCDNUrl(key, version, provider) + random
-          try {
-            await ctx.utils.loadRemoteScript(url, {
-              window: windowOpts,
-              document: documentOpts
-            })
-          } catch (e) {
-            console.error(`Failed to load ${key} from ${provider}:`, e)
-            // Fallback to symbo if not already using it
-            if (provider !== 'symbols') {
-              const fallbackUrl = getCDNUrl(key, version, 'symbols') + random
-              await ctx.utils.loadRemoteScript(fallbackUrl, {
-                window: windowOpts,
-                document: documentOpts
-              })
-            }
-          }
-        } else {
-          const url = getCDNUrl(key, 'latest', provider) + random
-          try {
-            await ctx.utils.loadRemoteScript(url, {
-              window: windowOpts,
-              document: documentOpts
-            })
-          } catch (e) {
-            console.error(`Failed to load ${key} from ${provider}:`, e)
-            // Fallback to symbo if not already using it
-            if (provider !== 'symbols') {
-              const fallbackUrl = getCDNUrl(key, 'latest', 'symbols') + random
-              await ctx.utils.loadRemoteScript(fallbackUrl, {
-                window: windowOpts,
-                document: documentOpts
-              })
-            }
-          }
-          windowOpts.packages[key] = 'loadedOnDeman'
-        }
-      }
-      return await windowOpts.require(key, provider)
-    }
-
-  if (windowOpts.packages) {
-    windowOpts.packages = merge(windowOpts.packages, packages)
-  } else {
-    windowOpts.packages = packages
-  }
-
-  if (!windowOpts.require) {
-    ctx.utils.require = await initRequire(ctx)
-    windowOpts.require = ctx.utils.require
-  }
-
-  if (!windowOpts.requireOnDemand) {
-    ctx.utils.requireOnDemand = await initRequireOnDemand(ctx)
-    windowOpts.requireOnDemand = ctx.utils.requireOnDemand
-  }
-}
-
-// --- CSS classlist/style transform handlers ---
-
-const RE_MULTI_SPACE = /\s+/g
-
-const execParam = (param, element) => {
-  if (typeof param === 'function') return param(element, element?.state, element?.context)
-  return param
-}
-
-const classify = (obj, element) => {
-  let className = ''
-  for (const item in obj) {
-    const param = obj[item]
-    if (typeof param === 'boolean' && param) className += ` ${item}`
-    else if (typeof param === 'string') className += ` ${param}`
-    else if (typeof param === 'function') {
-      className += ` ${execParam(param, element)}`
-    }
-  }
-  return className
-}
-
-const applyClassListOnNode = (params, element, node) => {
-  if (!params) return
-  const { key } = element
-  if (params === true) params = element.classlist = { key }
-  if (typeof params === 'string') params = element.classlist = { default: params }
-  if (params !== null && typeof params === 'object' && !Array.isArray(params)) {
-    params = classify(params, element)
-  }
-  const className = params.replace(RE_MULTI_SPACE, ' ').trim()
-  if (node && typeof node.setAttribute === 'function') {
-    node.setAttribute('class', className)
-  } else if (node) {
-    try { node.className = className } catch (e) { /* SVG element */ }
-  }
-  return className
-}
-
-const transformCssStyle = () => {
-  return (params, element, state) => {
-    const execParams = execParam(params, element)
-    if (params) {
-      const { __ref: ref } = element
-      ref.__class.style = execParams
-    }
-    transformCssClass()(
-      element.classlist,
-      element,
-      element.state,
-      true
-    )
-  }
-}
-
-const transformCssClass = () => {
-  return (params, element, state, flag) => {
-    if (element.style && !flag) return
-    const { __ref } = element
-    const { __class, __classNames } = __ref
-
-    if (params === null || typeof params !== 'object' || Array.isArray(params)) return
-    if (element.class) {
-      __classNames.classProps = element.class
-    }
-    if (element.attr?.class) {
-      __classNames.class = element.attr.class
-    }
-
-    for (const key in __class) {
-      const prop = __class[key]
-      if (!prop) {
-        delete __classNames[key]
-        continue
-      }
-      let className
-      if (typeof prop === 'string' || typeof prop === 'number') className = prop
-      else if (typeof prop === 'boolean') className = element.key
-      else className = css(prop)
-      __classNames[key] = className
-    }
-
-    // Remove stale classNames that no longer exist in __class
-    for (const key in __classNames) {
-      if (key === 'classProps' || key === 'class') continue
-      if (__class[key] === undefined) {
-        delete __classNames[key]
-      }
-    }
-
-    if (element.node) applyClassListOnNode(__classNames, element, element.node)
-  }
-}
-
-const createCssRegistry = () => {
-  return {
-    style: transformCssStyle(),
-    classlist: transformCssClass()
-  }
-}
-
-// --- Design system preparation ---
-
-const OPTION_KEYS = [
-  'useReset', 'useVariable', 'useFontImport', 'useIconSprite',
-  'useSvgSprite', 'useDocumentTheme', 'useDefaultIcons', 'useDefaultConfig', 'verbose',
-  'globalTheme'
-]
-
-let _designSystemInitialized = false
-
-export const prepareDesignSystem = (key, context) => {
-  const doc = context.document || (context.parent && context.parent.documentElement ? context.parent : null) || document
-  const initOptions = context.initOptions || {}
-
-  const registry = context.registry || createCssRegistry()
-  const designSystem = context.designSystem
-    ? deepMerge(deepClone(context.designSystem), DEFAULT_CONFIG)
-    : deepClone(DEFAULT_CONFIG)
-
-  // Pick context-level overrides (from user's config.js spread into context)
-  const contextOverrides = {}
-  for (const k of OPTION_KEYS) {
-    if (context[k] !== undefined) contextOverrides[k] = context[k]
-  }
-
-  let scratchSystem
-  const isSecondary = _designSystemInitialized && !context.skipDesignSystemInit
-  const scopeSelector = isSecondary ? `[data-smbls-app="${key}"]` : ':root'
-  // Expose for downstream consumers (element create.js stamps the attr)
-  context.scopeSelector = scopeSelector
-  const themeScope = scopeSelector === ':root'
-    ? ':root:not([data-theme])'
-    : `${scopeSelector}:not([data-theme])`
-  if (context.skipDesignSystemInit) {
-    // Reuse existing config (e.g. iframe context where init() already ran on parent)
-    scratchSystem = getActiveConfig(key) || getActiveConfig()
-    // Store the target document on the config so getActiveDocument()
-    // resolves it from the config stack.
-    if (scratchSystem) scratchSystem.document = doc
-    // Re-inject CSS vars into the target document via active document
-    if (scratchSystem?.CSS_VARS) {
-      pushConfig(scratchSystem)
-      try {
-        injectGlobal({ [scopeSelector]: scratchSystem.CSS_VARS })
-        if (scratchSystem.CSS_MEDIA_VARS) {
-          const themeStyles = {}
-          for (const key in scratchSystem.CSS_MEDIA_VARS) {
-            if (key.startsWith('@media')) {
-              themeStyles[key] = { [themeScope]: scratchSystem.CSS_MEDIA_VARS[key] }
-            } else {
-              themeStyles[key] = scratchSystem.CSS_MEDIA_VARS[key]
-            }
-          }
-          injectGlobal(themeStyles)
-        }
-      } finally {
-        popConfig()
-      }
-    }
-  } else if (isSecondary) {
-    // Secondary app (same-document embedding OR iframe-embedded) — scope
-    // cssVars to `[data-smbls-app="<key>"]` so the project DS does NOT leak
-    // into the primary app's subtree, AND pass `cleanBase: true` so the
-    // isolated config does not inherit the primary's processed tokens
-    // (e.g. editor brand themes leaking into project iframe).
-    const isolatedConfig = createConfig(key, designSystem, { cleanBase: true })
-    for (const k in contextOverrides) {
-      isolatedConfig[k] = contextOverrides[k]
-    }
-    // Store the target document on the config so getActiveDocument()
-    // resolves it from the config stack (no global singleton needed).
-    isolatedConfig.document = doc
-    // Derive CSS prefix for multi-app class name isolation
-    const cssPrefix = key.replace(/[^a-zA-Z0-9]/g, '').substring(0, 6)
-    context.cssPrefix = cssPrefix
-    isolatedConfig.varPrefix = cssPrefix
-    pushConfig(isolatedConfig)
-    try {
-      scratchSystem = init(isolatedConfig, {
-        key,
-        document: doc,
-        files: context.files,
-        assets: context.assets,
-        scopeSelector,
-        ...DEFAULT_CONTEXT,
-        ...contextOverrides,
-        ...initOptions
-      })
-    } finally {
-      popConfig()
-    }
-  } else {
-    // Primary app — use global config path (`:root`)
-    // Store the target document on the global config before init() so
-    // getActiveDocument() resolves it during injectGlobal() calls.
-    const globalConfig = getActiveConfig()
-    if (globalConfig) globalConfig.document = doc
-    scratchSystem = init(designSystem, {
-      key,
-      document: doc,
-      files: context.files,
-      assets: context.assets,
-      scopeSelector,
-      ...DEFAULT_CONTEXT,
-      ...contextOverrides,
-      ...initOptions
-    })
-    // Ensure the returned config also carries the document reference
-    if (scratchSystem && scratchSystem !== globalConfig) scratchSystem.document = doc
-    _designSystemInitialized = true
-  }
-
-  // CSS reset is injected in createDomql.js after sheet is guaranteed to exist
-
-  // Scoped inside pushConfig so getActiveDocument() resolves to this app's
-  // doc (the iframe's for secondary apps); otherwise @font-face rules land
-  // in the parent sheet and the iframe never sees them.
-  const activeConfig = scratchSystem?.CONFIG || scratchSystem
-  const fontConfig = activeConfig?.font
-  if (fontConfig) {
-    pushConfig(activeConfig)
-    try {
-      for (const fontKey in fontConfig) {
-        const fontData = fontConfig[fontKey]
-        if (!fontData?.fontFace) continue
-        const faces = Array.isArray(fontData.fontFace) ? fontData.fontFace : [fontData.fontFace]
-        for (const face of faces) {
-          if (typeof face === 'string' && face.includes('font-family')) {
-            injectGlobal(`@font-face { ${face} }`)
-          }
-        }
-      }
-    } finally {
-      popConfig()
-    }
-  }
-
-  return [scratchSystem, registry]
-}
-
-export const prepareState = (app, context) => {
-  const state = {}
-  if (context.state) utils.deepMerge(state, context.state)
-  if (app && app.state) deepMerge(state, app.state)
-
-  // Merge polyglot translations for active language into state
-  const poly = context.polyglot
-  if (poly?.translations) {
-    // Check localStorage for persisted language preference. Wrap the
-    // access — sandboxed iframes / Firefox storage-disabled mode throw on
-    // .getItem(), not just on .setItem().
-    let storedLang = null
-    try {
-      if (typeof localStorage !== 'undefined') {
-        storedLang = localStorage.getItem(poly.storageLangKey || 'smbls_lang') || localStorage.getItem('lang')
-      }
-    } catch (e) {}
-    const lang = storedLang || state.lang || poly.defaultLang || 'en'
-    if (storedLang && storedLang !== state.lang) state.lang = storedLang
-    const langT = poly.translations[lang]
-    if (langT && typeof langT === 'object') {
-      for (const k in langT) {
-        state[k] = langT[k] // Override with active language translations
-      }
-    }
-    // Also merge top-level translation keys (skip language code keys)
-    const langs = new Set(poly.languages || [])
-    for (const k in poly.translations) {
-      if (!langs.has(k) && state[k] === undefined) {
-        state[k] = poly.translations[k]
-      }
-    }
-  }
-
-  state.isRootState = true
-  return deepClone(state)
-}
-
-export const preparePages = (app, context) => {
-  if (isObject(app.routes) && isObject(context.pages)) {
-    merge(app.routes, context.pages)
-  }
-  const pages = app.routes || context.pages || {}
-  for (const v in pages) {
-    if (v.charCodeAt(0) === 47) continue // '/'
-    const index = v === 'index' ? '' : v
-    pages['/' + index] = pages[v]
-    delete pages[v]
-  }
-  return pages
-}
-
-export const prepareSharedLibs = (context) => {
-  mergeSharedLibraries(context, context.sharedLibraries)
-}

package/src/router.js

@@ -1,107 +0,0 @@
-'use strict'
-
-import { window, deepMerge, merge, isUndefined } from '@symbo.ls/utils'
-import { router as defaultRouter } from '@symbo.ls/router'
-
-const normalizePath = (p) => (!p || p === 'srcdoc' || p === 'about:srcdoc' || p === 'blank' || p === 'about:blank') ? '/' : p
-
-const DEFAULT_ROUTING_OPTIONS = {
-  initRouter: true,
-  injectRouterInLinkComponent: true,
-  popState: true
-}
-
-export const resolveRouterElement = (root, path) => {
-  if (!path) return root
-  const parts = Array.isArray(path) ? path : path.split('.')
-  let el = root
-  for (const part of parts) {
-    if (!el || !el[part]) return null
-    el = el[part]
-  }
-  return el
-}
-
-export const initRouter = (element, context) => {
-  if (context.router === false) return
-  else if (context.router === true) context.router = DEFAULT_ROUTING_OPTIONS
-  else context.router = merge(context.router || {}, DEFAULT_ROUTING_OPTIONS)
-
-  const routerOptions = context.router
-
-  const onRouterRenderDefault = async (el, s) => {
-    const win = el.context?.window || window
-    if (!win.location) return
-    let { pathname, search, hash } = win.location
-    pathname = normalizePath(pathname)
-    const url = pathname + search + hash
-
-    let targetEl = el
-    if (routerOptions.customRouterElement) {
-      const resolved = resolveRouterElement(el, routerOptions.customRouterElement)
-      if (resolved) {
-        targetEl = resolved
-        if (el.routes) targetEl.routes = el.routes
-      }
-    }
-
-    if (targetEl.routes) await defaultRouter(url, targetEl, {}, { initialRender: true, pushState: false })
-  }
-
-  const hasRenderRouter = !isUndefined(element.onRenderRouter)
-  if (routerOptions && routerOptions.initRouter && !hasRenderRouter) {
-    element.onRenderRouter = onRouterRenderDefault
-  }
-
-  injectRouterInLinkComponent(context, routerOptions)
-
-  return routerOptions
-}
-
-export const onpopstateRouter = (element, context) => {
-  if (context.router === false) return
-  const routerOptions = context.router || DEFAULT_ROUTING_OPTIONS
-  if (!routerOptions.popState) return
-  const router =
-    context.utils && context.utils.router ? context.utils.router : defaultRouter
-
-  const win = context.window || window
-  // addEventListener (not onpopstate=) so multiple apps in the same realm
-  // don't clobber each other's handlers. The teardown is queued on
-  // context.__teardowns so destroy(app) can remove it cleanly.
-  const handler = async e => {
-    let { pathname, search, hash } = win.location
-    pathname = normalizePath(pathname)
-    const url = pathname + search + hash
-
-    let targetEl = element
-    if (routerOptions.customRouterElement) {
-      const resolved = resolveRouterElement(element, routerOptions.customRouterElement)
-      if (resolved) {
-        targetEl = resolved
-        if (element.routes) targetEl.routes = element.routes
-      }
-    }
-
-    await targetEl.call(
-      'router',
-      url,
-      targetEl,
-      {},
-      { pushState: false, scrollToTop: false, level: 0, event: e }
-    )
-  }
-  win.addEventListener('popstate', handler)
-  context.__teardowns = context.__teardowns || []
-  context.__teardowns.push(() => win.removeEventListener('popstate', handler))
-}
-
-export const injectRouterInLinkComponent = (context, routerOptions) => {
-  const { components } = context
-  if (routerOptions && routerOptions.injectRouterInLinkComponent) {
-    return deepMerge(
-      components['Link'] || components['smbls.Link'],
-      components['RouterLink'] || components['smbls.RouterLink']
-    )
-  }
-}

package/src/syncExtend.js

@@ -1,17 +0,0 @@
-'use strict'
-
-import { isObjectLike } from '@symbo.ls/utils'
-
-// All sync-related auto-injection moved to plugins:
-//   - `syncPlugin` (HMR)            in `@symbo.ls/sync`
-//   - `notificationsPlugin` (toasts) in `@symbo.ls/sync`
-//   - `inspectPlugin` (overlay)      in `@symbo.ls/inspect`
-// The framework registers them through the generic `context.plugins`
-// mechanism in `prepareContext` (`./createDomql.js`). This file only
-// exposes the lone helper that survived: `initializeExtend`, which
-// normalises `app.extends` to an array before any plugin's
-// `beforeCreate` runs.
-
-export const initializeExtend = (app, ctx) => {
-  return isObjectLike(app.extends) ? app.extends : []
-}

package/src/utilImports.js

@@ -1,8 +0,0 @@
-'use strict'
-
-import { scratchUtils, scratchSystem, set } from '@symbo.ls/scratch'
-
-export { scratchUtils, scratchSystem, set }
-export * from '@symbo.ls/utils'
-export { init, reinit, applyCSS } from './init.js'
-export * from '@symbo.ls/router'