smbls 3.6.8 → 3.7.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smbls",
-  "version": "3.6.8",
+  "version": "3.7.3",
   "license": "CC-BY-NC-4.0",
   "repository": "https://github.com/symbo-ls/smbls",
   "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681",
@@ -29,21 +29,22 @@
     "src"
   ],
   "dependencies": {
-    "@symbo.ls/emotion": "^3.6.8",
-    "@symbo.ls/helmet": "^3.6.8",
-    "@domql/report": "^3.6.8",
-    "@domql/router": "^3.6.8",
-    "@domql/utils": "^3.6.8",
-    "@symbo.ls/cli": "^3.6.8",
-    "@symbo.ls/default-config": "^3.6.8",
-    "@symbo.ls/fetch": "^3.6.8",
-    "@symbo.ls/scratch": "^3.6.8",
-    "@symbo.ls/sync": "^3.6.8",
-    "@symbo.ls/uikit": "^3.6.8",
-    "@symbo.ls/smbls-utils": "^3.6.8",
-    "attrs-in-props": "^3.6.8",
-    "css-in-props": "^3.6.8",
-    "domql": "^3.6.8"
+    "@symbo.ls/emotion": "^3.7.3",
+    "@symbo.ls/helmet": "^3.7.3",
+    "@domql/report": "^3.7.3",
+    "@domql/router": "^3.7.3",
+    "@domql/utils": "^3.7.3",
+    "@symbo.ls/cli": "^3.7.3",
+    "@symbo.ls/default-config": "^3.7.3",
+    "@symbo.ls/fetch": "^3.7.3",
+    "@symbo.ls/polyglot": "^3.7.3",
+    "@symbo.ls/scratch": "^3.7.3",
+    "@symbo.ls/sync": "^3.7.3",
+    "@symbo.ls/uikit": "^3.7.3",
+    "@symbo.ls/smbls-utils": "^3.7.3",
+    "attrs-in-props": "^3.7.3",
+    "css-in-props": "^3.7.3",
+    "domql": "^3.7.3"
   },
   "publishConfig": {
     "access": "public"

package/src/createDomql.js

@@ -28,6 +28,11 @@ import {
   PACKAGE_MANAGER_TO_CDN
 } from './prepare.js'
 
+import { polyglotPlugin } from '@symbo.ls/polyglot'
+import { polyglotFunctions } from '@symbo.ls/polyglot/functions'
+import { helmetPlugin } from '@symbo.ls/helmet'
+import { fetchPlugin } from '@symbo.ls/fetch'
+
 export const prepareContext = async (app, context = {}) => {
   const key = (context.key = context.key || (isString(app) ? app : 'smblsapp'))
   context.define = context.define || defaultDefine
@@ -58,6 +63,26 @@ export const prepareContext = async (app, context = {}) => {
   context.defaultExtends = [uikit.Box]
   context.snippets = context.snippets || {}
   context.functions = context.functions || {}
+  context.plugins = context.plugins || []
+
+  // Auto-register plugins based on context config
+  const hasPlugin = (name) => context.plugins.some(p => p.name === name)
+
+  if (context.polyglot && !hasPlugin('polyglot')) {
+    context.plugins.push(polyglotPlugin)
+    for (const k in polyglotFunctions) {
+      if (!(k in context.functions)) context.functions[k] = polyglotFunctions[k]
+    }
+  }
+
+  if (!hasPlugin('helmet')) {
+    context.plugins.push(helmetPlugin)
+  }
+
+  if (context.fetch && !hasPlugin('fetch')) {
+    context.plugins.push(fetchPlugin)
+  }
+
   return context
 }
 

package/src/define.js

@@ -3,35 +3,62 @@
 import { resolveMetadata, applyMetadata } from '@symbo.ls/helmet'
 import { executeFetch } from '@symbo.ls/fetch'
 
-export const defaultDefine = {
-  routes: param => param,
+const fetchHandler = (param, el, state, context) => {
+  if (!param) return
+  executeFetch(param, el, state, context)
+}
 
-  metadata: (param, el, state) => {
-    if (!param) return
-    const doc = el.context?.document || (typeof document !== 'undefined' && document)
-    if (!doc) return
-    const resolved = resolveMetadata(param, el, state)
-    applyMetadata(resolved, doc)
-  },
+const metadataHandler = (param, el, state) => {
+  if (!param) return
+  const doc = el.context?.document || (typeof document !== 'undefined' && document)
+  if (!doc) return
+  const resolved = resolveMetadata(param, el, state)
+  applyMetadata(resolved, doc)
+}
 
-  fetch: (param, el, state, context) => {
-    if (!param) return
-    executeFetch(param, el, state, context)
-  },
+const routerHandler = async (param, el) => {
+  if (!param) return
 
-  $router: async (param, el) => {
-    if (!param) return
+  const obj = { tag: 'fragment', ...param }
 
-    const obj = { tag: 'fragment', ...param }
+  const set = async () => {
+    await el.set(obj, { preventDefineUpdate: '$router' })
+  }
 
-    const set = async () => {
-      await el.set(obj, { preventDefineUpdate: '$router' })
-    }
+  if (el.props && el.props.lazyLoad) {
+    window.requestAnimationFrame(set)
+  } else await set()
 
-    if (el.props && el.props.lazyLoad) {
-      window.requestAnimationFrame(set)
-    } else await set()
+  return obj
+}
 
-    return obj
-  }
+export const defaultDefine = {
+  routes: param => param,
+  metadata: metadataHandler,
+  fetch: fetchHandler,
+  $router: routerHandler
+}
+
+/**
+ * Create a custom define object with optional features.
+ *
+ * @param {Object} opts
+ * @param {boolean} [opts.fetch=true] - Include fetch handler
+ * @param {boolean} [opts.metadata=true] - Include metadata/helmet handler
+ * @param {boolean} [opts.router=true] - Include router handler
+ * @returns {Object} define handlers
+ *
+ * @example
+ * // Disable fetch:
+ * context.define = createDefine({ fetch: false })
+ *
+ * // Only router:
+ * context.define = createDefine({ fetch: false, metadata: false })
+ */
+export const createDefine = (opts = {}) => {
+  const define = { routes: param => param }
+  if (opts.metadata !== false) define.metadata = metadataHandler
+  if (opts.fetch !== false) define.fetch = fetchHandler
+  if (opts.router !== false) define.$router = routerHandler
+  return define
 }

package/src/index.js

@@ -103,3 +103,8 @@ export default create
 
 export * from './init.js'
 export { DEFAULT_CONTEXT, DESIGN_SYSTEM_OPTIONS, ROUTER_OPTIONS } from './options.js'
+export { defaultDefine, createDefine } from './define.js'
+
+// Polyglot i18n plugin
+export { polyglotPlugin, translate, setLang, getActiveLang, getLanguages, loadTranslations, upsertTranslation, initPolyglot, getLocalStateLang } from '@symbo.ls/polyglot'
+export { polyglotFunctions } from '@symbo.ls/polyglot/functions'

package/src/init.js

@@ -53,15 +53,15 @@ export const init = (config, options = SET_OPTIONS) => {
     { newConfig: options.newConfig }
   )
 
-  const FontFace = getFontFaceString(conf.font || conf.FONT, conf.files)
+  const FontFace = getFontFaceString(conf.font, conf.files)
 
   const useReset = conf.useReset
   const useVariable = conf.useVariable
   const useFontImport = conf.useFontImport
   const useSvgSprite = conf.useSvgSprite
-  const hasSvgs = config.svg || config.SVG
+  const hasSvgs = config.svg
   const useIconSprite = conf.useIconSprite
-  const hasIcons = config.icons || config.ICONS
+  const hasIcons = config.icons
 
   if (useFontImport) emotion.injectGlobal(FontFace)
   if (useVariable) {
@@ -81,10 +81,10 @@ export const init = (config, options = SET_OPTIONS) => {
       emotion.injectGlobal(themeStyles)
     }
   }
-  if (useReset) emotion.injectGlobal(conf.reset || conf.RESET)
+  if (useReset) emotion.injectGlobal(conf.reset)
 
   // Register all ANIMATION entries as global @keyframes
-  const animations = conf.animation || conf.ANIMATION
+  const animations = conf.animation
   if (animations) {
     const keyframesCSS = {}
     for (const name in animations) {
@@ -94,10 +94,10 @@ export const init = (config, options = SET_OPTIONS) => {
   }
 
   if (hasSvgs || useSvgSprite)
-    appendSVGSprite(conf.svg || conf.SVG, { document: options.document })
+    appendSVGSprite(conf.svg, { document: options.document })
 
   if (hasIcons || useIconSprite)
-    appendSvgIconsSprite(conf.icons || conf.ICONS, { document: options.document })
+    appendSvgIconsSprite(conf.icons, { document: options.document })
 
   return conf
 }
@@ -126,7 +126,7 @@ export const reinit = (config, options = UPDATE_OPTIONS) => {
       }
       emotion.injectGlobal(themeStyles)
     }
-    emotion.injectGlobal(conf.RESET)
+    emotion.injectGlobal(conf.reset)
   }
   return conf
 }