@lightningjs/blits 2.0.0-beta.1 → 2.0.0-beta.2

package/src/plugins/language.d.ts

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface LanguagePlugin {
+  translate(key: string, ...replacements: any[]): string
+  readonly language: string
+  set(language: string): void
+  translations(translationsObject: Record<string, unknown>): void
+  load(file: string): Promise<void>
+}
+
+export interface LanguagePluginOptions {
+  file?: string
+  language?: string
+}
+
+declare const language: {
+  readonly name: 'language'
+  plugin: (options?: LanguagePluginOptions) => LanguagePlugin
+}
+
+export default language
+

package/src/plugins/storage/storage.d.ts

@@ -0,0 +1,31 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface StoragePlugin {
+  get<T = unknown>(key: string): T | null
+  set(key: string, value: unknown): boolean
+  remove(key: string): void
+  clear(): void
+}
+
+declare const storage: {
+  readonly name: 'storage'
+  plugin: () => StoragePlugin
+}
+
+export default storage
+

package/src/plugins/theme.d.ts

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2024 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export interface ThemePlugin {
+  get<T = unknown>(key: string): T | undefined
+  get<T>(key: string, fallback: T): T
+  /**
+   * @deprecated
+   * Deprecated:  use `$theme.current()` instead
+   */
+  set(theme: string): void
+  current(theme: string): void
+  variant(theme: string): void
+}
+
+export interface ThemePluginConfig {
+  themes?: Record<string, Record<string, unknown>>
+  current?: string
+  base?: string
+  variant?: string
+}
+
+declare const theme: {
+  readonly name: 'theme'
+  plugin: (config?: ThemePluginConfig | Record<string, unknown>) => ThemePlugin
+}
+
+export default theme
+

package/src/plugins/theme.js

@@ -20,13 +20,17 @@ import { reactive } from '../lib/reactivity/reactive.js'
 
 import Settings from '../settings.js'
 
-const getValueByDotNotation = (obj, base, path) => {
+const getValueByDotNotation = (obj, base, variant, path) => {
   const keys = path.split('.')
 
   for (let i = 0; i < keys.length; i++) {
     const key = keys[i]
 
-    if (obj !== null && key in obj === true) {
+    if (variant !== null && key in variant === true) {
+      obj = variant[key]
+      variant = variant !== null && key in variant === true ? variant[key] : null
+      base = base !== null && key in base === true ? base[key] : null
+    } else if (obj !== null && key in obj === true) {
       obj = obj[key]
       base = base !== null && key in base === true ? base[key] : null
     }
@@ -51,6 +55,7 @@ export default {
     const state = reactive(
       {
         current: 'default',
+        variant: null,
       },
       Settings.get('reactivityMode'),
       true
@@ -62,6 +67,7 @@ export default {
       themes = config.themes
       state.current = config.current || 'default'
       base = config.base || 'default'
+      state.variant = config.variant || null
     } else {
       themes = { default: config }
     }
@@ -71,8 +77,14 @@ export default {
         // reference state.current, to trigger reactive effects for
         // theme get function when current theme is modified
         state.current
+        state.variant
         if (themeMap[key] !== undefined) return themeMap[key]
-        const value = getValueByDotNotation(themes[state.current], themes[base] || null, key)
+        const value = getValueByDotNotation(
+          themes[state.current],
+          themes[base] || null,
+          themes[state.variant] || null,
+          key
+        )
         if (value !== undefined) {
           // store the value for next time
           themeMap[key] = value
@@ -82,6 +94,11 @@ export default {
       },
 
       set(theme) {
+        Log.warn('$theme.set() is deprecated, use $theme.current() instead')
+        this.current(theme)
+      },
+
+      current(theme) {
         if (theme in themes) {
           themeMap = {}
           state.current = theme
@@ -89,6 +106,16 @@ export default {
           Log.warn(`Theme ${theme} not found`)
         }
       },
+
+      variant(theme) {
+        if (theme in themes) {
+          themeMap = {}
+          state.variant = theme
+          console.log('change variant', theme)
+        } else {
+          Log.warn(`Variant ${theme} not found`)
+        }
+      },
     }
   },
 }

package/src/router/router.js

@@ -30,6 +30,9 @@ import Settings from '../settings.js'
  * @typedef {import('../component.js').BlitsComponent} BlitsComponent - The element of the route
  * @typedef {import('../engines/L3/element.js').BlitsElement} BlitsElement - The element of the route
  *
+ * @typedef {BlitsComponent|BlitsComponentFactory} RouteView
+ * @typedef {RouteView & { default?: BlitsComponentFactory }} RouteViewWithOptionalDefault
+ *
  * @typedef {Object} Route
  * @property {string} path - The path of the route
  * @property {string} hash - The hash of the route
@@ -57,6 +60,7 @@ export const state = reactive(
     data: null,
     params: null,
     hash: '',
+    backNavigation: true,
   },
   Settings.get('reactivityMode'),
   true
@@ -335,6 +339,7 @@ export const navigate = async function () {
           return
         }
       }
+
       // add the previous route (technically still the current route at this point)
       // into the history stack when inHistory is true and we're not navigating back
       if (
@@ -354,6 +359,7 @@ export const navigate = async function () {
       /** @type {import('../engines/L3/element.js').BlitsElement} */
       let holder
 
+      /** @type {RouteViewWithOptionalDefault|undefined|null} */
       let view
       let focus
       // when navigating back let's see if we're navigating back to a route that was kept alive
@@ -397,7 +403,7 @@ export const navigate = async function () {
       // Update router state after announcements and final route resolution,
       // right before initializing or restoring the view
       state.path = route.path
-      state.params = route.params || {}
+      state.params = Object.keys(route.params).length === 0 ? null : route.params
       state.hash = route.hash
       state.data = null
       state.data = route.data || {}
@@ -484,7 +490,7 @@ export const navigate = async function () {
         shouldAnimate = true
         const oldView = this[symbols.children].splice(1, 1).pop()
         if (oldView) {
-          removeView(previousRoute, oldView, route.transition.out, navigatingBack)
+          await removeView(previousRoute, oldView, route.transition.out, navigatingBack)
         }
       }
 
@@ -492,7 +498,7 @@ export const navigate = async function () {
       if (route.transition.in) {
         if (Array.isArray(route.transition.in)) {
           for (let i = 0; i < route.transition.in.length; i++) {
-            i === route.transition.length - 1
+            i === route.transition.in.length - 1
               ? await setOrAnimate(holder, route.transition.in[i], shouldAnimate)
               : setOrAnimate(holder, route.transition.in[i], shouldAnimate)
           }
@@ -500,6 +506,33 @@ export const navigate = async function () {
           await setOrAnimate(holder, route.transition.in, shouldAnimate)
         }
       }
+
+      if (this[symbols.parent][symbols.routerHooks]) {
+        const hooks = this[symbols.parent][symbols.routerHooks]
+        if (hooks.afterEach) {
+          try {
+            await hooks.afterEach.call(
+              this.parent,
+              route, // to
+              previousRoute // from
+            )
+          } catch (error) {
+            Log.error('Error in "AfterEach" Hook', error)
+          }
+        }
+      }
+
+      if (route.hooks.after) {
+        try {
+          await route.hooks.after.call(
+            this.parent,
+            route, // to
+            previousRoute // from
+          )
+        } catch (error) {
+          Log.error('Error or Rejected Promise in "After" Hook', error)
+        }
+      }
     } else {
       Log.error(`Route ${route.hash} not found`)
       const routerHooks = this[symbols.parent][symbols.routerHooks]

package/vite/preCompiler.js

@@ -32,12 +32,22 @@ export default function () {
 
       // we should only precompile .blits, .js and .ts files
       if (
-        fileExtension === '.js' ||
-        fileExtension === '.ts' ||
-        fileExtension === '.blits' ||
-        fileExtension === '.mjs'
+        filePath.indexOf('node_modules') === -1 &&
+        (fileExtension === '.js' ||
+          fileExtension === '.ts' ||
+          fileExtension === '.blits' ||
+          fileExtension === '.mjs')
       ) {
-        return compiler(source, filePath, config.mode)
+        const result = compiler(source, filePath, config.mode)
+
+        if (typeof result === 'object') {
+          return {
+            code: result.code,
+            map: result.map,
+          }
+        }
+        // No transformation needed - return null so Vite knows no changes were made
+        return null
       }
 
       // vite expects null if there is no modification