@inglorious/web 3.0.0 → 4.0.0

package/README.md

@@ -371,7 +371,8 @@ To enable the router, add it to your store's types and create a `router` entity.
 
 ```javascript
 // store.js
-import { createStore, html, router } from "@inglorious/web"
+import { createStore, html } from "@inglorious/web"
+import { router } from "@inglorious/web/router"
 
 const types = {
   // 1. Add the router type to your store's types
@@ -520,7 +521,8 @@ export const requireAuth = (type) => ({
 
 ```javascript
 // store.js
-import { createStore, router } from "@inglorious/web"
+import { createStore } from "@inglorious/web"
+import { router } from "@inglorious/web/router"
 import { requireAuth } from "./guards/require-auth.js"
 import { adminPage } from "./pages/admin.js"
 import { loginPage } from "./pages/login.js"
@@ -646,7 +648,7 @@ To use it, import the `table` type and its CSS, then create an entity for your t
 
 ```javascript
 // In your entity definition file
-import { table } from "@inglorious/web"
+import { table } from "@inglorious/web/table"
 
 // Import base styles and a theme. You can create your own theme.
 import "@inglorious/web/table/base.css"
@@ -673,7 +675,7 @@ You can customize how data is rendered in the table cells by overriding the `ren
 The example below from `examples/apps/web-table/src/product-table/product-table.js` shows how to format values based on a `formatter` property in the column definition.
 
 ```javascript
-import { table } from "@inglorious/web"
+import { table } from "@inglorious/web/table"
 import { format } from "date-fns"
 
 const formatters = {
@@ -705,7 +707,8 @@ The table comes with a base stylesheet (`@inglorious/web/table/base.css`) and a
 Import the `select` type and its CSS, then create an entity.
 
 ```javascript
-import { createStore, select } from "@inglorious/web"
+import { createStore } from "@inglorious/web"
+import { select } from "@inglorious/web/select"
 // Import base styles and theme
 import "@inglorious/web/select/base.css"
 import "@inglorious/web/select/theme.css"
@@ -765,7 +768,8 @@ It listens to internal events like `#<id>:toggle`, `#<id>:optionSelect`, etc. Yo
 Include `form` in your `types` and create an entity for the form (use any id you like — `form` is used below for clarity):
 
 ```javascript
-import { createStore, form } from "@inglorious/web"
+import { createStore } from "@inglorious/web"
+import { form } from "@inglorious/web/form"
 
 const types = { form }
 
@@ -866,7 +870,8 @@ It also expects the item type to export `renderItem(item, index, api)` so each v
 Minimal example showing how to extend the `list` type to create a domain-specific list (e.g. `productList`) and provide a `renderItem(item, index, api)` helper.
 
 ```javascript
-import { createStore, html, list } from "@inglorious/web"
+import { createStore, html } from "@inglorious/web"
+import { list } from "@inglorious/web/list"
 
 // Extend the built-in list type to render product items
 const productList = {
@@ -952,18 +957,19 @@ import {
   styleMap,
   unsafeHTML,
   when,
-  // router stuff
-  router,
-  // table stuff
-  table,
-  // form stuff
+} from "@inglorious/web"
+
+// Subpath imports for tree-shaking
+import {
   form,
   getFieldError,
   getFieldValue,
   isFieldTouched,
-  // virtualized list stuff
-  list,
-} from "@inglorious/web"
+} from "@inglorious/web/form"
+import { list } from "@inglorious/web/list"
+import { router } from "@inglorious/web/router"
+import { select } from "@inglorious/web/select"
+import { table } from "@inglorious/web/table"
 ```
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/web",
-  "version": "3.0.0",
+  "version": "4.0.0",
   "description": "A new web framework that leverages the power of the Inglorious Store combined with the performance and simplicity of lit-html.",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -53,16 +53,20 @@
   },
   "files": [
     "src",
-    "types"
+    "types",
+    "!src/**/*.test.js"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "dependencies": {
+    "@lit-labs/ssr-client": "^1.1.8",
     "lit-html": "^3.3.1",
-    "@inglorious/utils": "3.7.0",
-    "@inglorious/store": "8.0.0"
+    "@inglorious/store": "9.0.0",
+    "@inglorious/utils": "3.7.1"
   },
   "devDependencies": {
     "prettier": "^3.6.2",

package/src/mount.js

@@ -1,3 +1,4 @@
+import { hydrate } from "@lit-labs/ssr-client"
 import { html, render } from "lit-html"
 
 /**
@@ -11,20 +12,19 @@ export function mount(store, renderFn, element) {
   const api = { ...store._api }
   api.render = createRender(api)
 
-  // let renderScheduled = false
+  let shouldHydrate = element.hasChildNodes()
 
-  // const scheduleRender = () => {
-  //   if (!renderScheduled) {
-  //     renderScheduled = true
-  //     requestAnimationFrame(() => {
-  //       renderScheduled = false
-  //     })
-  //     render(renderFn(api), element)
-  //   }
-  // }
+  const unsubscribe = store.subscribe(() => {
+    const template = renderFn(api)
+
+    if (shouldHydrate) {
+      hydrate(template, element)
+      shouldHydrate = false
+    } else {
+      render(template, element)
+    }
+  })
 
-  // const unsubscribe = store.subscribe(scheduleRender)
-  const unsubscribe = store.subscribe(() => render(renderFn(api), element))
   store.notify("init")
 
   return unsubscribe

package/src/router/index.js

@@ -7,6 +7,7 @@
 const SKIP_FULL_MATCH_GROUP = 1 // .match() result at index 0 is the full string
 const REMOVE_COLON_PREFIX = 1
 
+const routeConfig = {}
 let areListenersInitialized = false
 
 /**
@@ -25,7 +26,7 @@ export const router = {
     // Handle initial route
     const { pathname, search } = window.location
     const initialPath = pathname + search
-    const route = findRoute(entity.routes, initialPath)
+    const route = findRoute(routeConfig, initialPath)
     const entityId = entity.id
 
     if (route) {
@@ -42,8 +43,7 @@ export const router = {
     // Listen for browser back/forward
     window.addEventListener("popstate", () => {
       const path = window.location.pathname + window.location.search
-      const { routes } = api.getEntity(entityId)
-      const route = findRoute(routes, path)
+      const route = findRoute(routeConfig, path)
 
       if (route) {
         api.notify(`#${entityId}:routeSync`, {
@@ -83,18 +83,6 @@ export const router = {
     })
   },
 
-  create(entity) {
-    entity.routes ??= {}
-  },
-
-  routeAdd(entity, route) {
-    entity.routes[route.path] = route.entityType
-  },
-
-  routeRemove(entity, path) {
-    delete [entity.routes[path]]
-  },
-
   /**
    * Handles navigation to a new route.
    * @param {RouterEntity} entity - The router entity.
@@ -122,9 +110,9 @@ export const router = {
     }
 
     // If "to" is already a final path (like "/users/1"), use it directly
-    // The router will match it against patterns in entity.routes
+    // The router will match it against patterns in routeConfig
 
-    const route = findRoute(entity.routes, path)
+    const route = findRoute(routeConfig, path)
 
     if (!route) {
       console.warn(`No route matches path: ${path}`)
@@ -142,7 +130,7 @@ export const router = {
 
     // Asynchronous navigation
     if (typeof route.entityType === "function") {
-      entity.loading = true
+      entity.isLoading = true
       entity.error = null
       const entityId = entity.id
 
@@ -186,14 +174,16 @@ export const router = {
   loadSuccess(entity, payload, api) {
     const { module, route, path, replace, state } = payload
 
-    const [[typeName, type]] = Object.entries(module)
+    const [typeName, type] = Object.entries(module).find(
+      ([, type]) => type?.render,
+    )
 
-    api.notify("morph", { name: typeName, type })
+    api.setType(typeName, type)
 
-    entity.routes[route.pattern] = typeName
+    routeConfig[route.pattern] = typeName
 
     // Complete the navigation
-    entity.loading = false
+    entity.isLoading = false
 
     doNavigate(
       entity,
@@ -211,7 +201,7 @@ export const router = {
     const { error, path } = payload
     console.error(`Failed to load route ${path}:`, error)
     entity.path = path
-    entity.loading = false
+    entity.isLoading = false
     entity.error = error
   },
 
@@ -225,6 +215,49 @@ export const router = {
   },
 }
 
+/**
+ * Retrieves the current route configuration.
+ * @returns {Record<string, string|function>} The current route configuration.
+ */
+export function getRoutes() {
+  return routeConfig
+}
+
+/**
+ * Retrieves a single route configuration given its path.
+ * @param {string} path - The path of the route to retrieve.
+ * @returns {string|function|undefined} The route configuration or undefined if not found.
+ */
+export function getRoute(path) {
+  return routeConfig[path]
+}
+
+/**
+ * Sets or updates routes in the route configuration.
+ * Can be used both during initialization and at any point to add or update routes dynamically.
+ * @param {Record<string, string|function>} routes - An object mapping route paths/patterns to entity type names or loader functions.
+ */
+export function setRoutes(routes) {
+  Object.assign(routeConfig, routes)
+}
+
+/**
+ * Adds a single route to the route configuration.
+ * @param {string} path - The route path or pattern (e.g., "/users/:userId").
+ * @param {string|function} route - The entity type name or a function that dynamically loads it.
+ */
+export function addRoute(path, route) {
+  routeConfig[path] = route
+}
+
+/**
+ * Removes a route from the route configuration.
+ * @param {string} path - The route path or pattern to remove.
+ */
+export function removeRoute(path) {
+  delete routeConfig[path]
+}
+
 /**
  * Builds a URL path by substituting parameters into a route pattern.
  * @param {string} pattern - The route pattern (e.g., "/users/:userId").
@@ -244,16 +277,16 @@ function buildPath(pattern, params = {}) {
 /**
  * Finds a matching route configuration for a given URL path.
  * It supports parameterized routes and a fallback "*" route.
- * @param {Record<string, string>} routes - The routes configuration map.
+ * @param {Record<string, string>} routeConfig - The routes configuration map.
  * @param {string} path - The URL path to match.
  * @returns {{pattern: string, entityType: string, params: Record<string, string>, path: string}|null}
  * The matched route object or null if no match is found.
  */
-function findRoute(routes, path) {
+function findRoute(routeConfig, path) {
   const [pathname] = path.split("?")
   let fallbackRoute = null
 
-  for (const [pattern, entityType] of Object.entries(routes)) {
+  for (const [pattern, entityType] of Object.entries(routeConfig)) {
     if (pattern === "*") {
       fallbackRoute = { pattern, entityType, params: {}, path: pathname }
       continue

package/types/router.d.ts

@@ -26,8 +26,6 @@ export type QueryParams = Record<string, string>
 export interface RouterEntity {
   /** A unique identifier for the router entity. */
   id: string | number
-  /** The route configuration. */
-  routes: RoutesConfig
   /** The current active path, without query string or hash. */
   path?: string
   /** The entity type of the current active route. */
@@ -38,6 +36,10 @@ export interface RouterEntity {
   query?: QueryParams
   /** The hash from the current URL. */
   hash?: string
+  /** Whether a route is currently loading asynchronously. */
+  isLoading?: boolean
+  /** An error that occurred during route loading. */
+  error?: Error | null
 }
 
 /**
@@ -98,7 +100,7 @@ export interface RouterType {
     entity: RouterEntity,
     payload: string | number | NavigatePayload,
     api: StoreApi,
-  ): void
+  ): void | Promise<void>
 
   /**
    * Synchronizes the router entity's state with data from a routing event,
@@ -128,3 +130,41 @@ export interface RouterType {
    */
   loadError(entity: RouterEntity, payload: any): void
 }
+
+/**
+ * Returns the current route configuration.
+ * @returns {Record<string, string|function>} The current route configuration.
+ */
+export function getRoutes(): Record<string, string | (() => Promise<any>)>
+
+/**
+ * Retrieves a single route configuration given its path.
+ * @param {string} path - The path of the route to retrieve.
+ * @returns {string|function|undefined} The route configuration or undefined if not found.
+ */
+export function getRoute(path: string): string | (() => Promise<any>)
+
+/**
+ * Sets or updates routes in the route configuration.
+ * Can be used both during initialization and at any point to add or update routes dynamically.
+ * @param routes An object mapping route paths/patterns to entity type names or loader functions.
+ */
+export function setRoutes(
+  routes: Record<string, string | (() => Promise<any>)>,
+): void
+
+/**
+ * Adds a single route to the route configuration.
+ * @param path The route path or pattern (e.g., "/users/:userId").
+ * @param route The entity type name or a function that dynamically loads it.
+ */
+export function addRoute(
+  path: string,
+  route: string | (() => Promise<any>),
+): void
+
+/**
+ * Removes a route from the route configuration.
+ * @param path The route path or pattern to remove.
+ */
+export function removeRoute(path: string): void