jaxs 0.3.1 → 0.3.2

package/dist/jaxs.js

@@ -36,11 +36,9 @@ var setEventsOnElement = (element, events, publish) => {
   element.eventMaps = eventMaps;
 };
 var createNode = (type, document) => {
-  document = document || window.document;
   return document.createElement(type);
 };
 var createTextNode = (value, document) => {
-  document = document || window.document;
   return document.createTextNode(value);
 };
 var createDecoratedNode = (type, attributes, events, renderKit) => {
@@ -79,7 +77,7 @@ var namespace = "http://www.w3.org/2000/svg";
 var isSvgTag = (tagType) => tagType === "svg";
 var isSvg = (element) => element.namespaceURI === namespace;
 var createSvgNode = (type, attributes, renderKit) => {
-  const document = renderKit && renderKit.document || window.document;
+  const { document } = renderKit;
   const node = document.createElementNS(namespace, type);
   for (const key in attributes) {
     if (key === "__self" || key === "xmlns")
@@ -1018,7 +1016,7 @@ var extractQueryParams = (queryString) => {
     return aggregate;
   }, {});
 };
-var onLocationChange = (_payload, { publish, state: state2 }) => {
+var onLocationChange = (_payload, { publish, state: state2, window }) => {
   const { host, pathname, search } = window.location;
   const path = pathname;
   const query = extractQueryParams(search);
@@ -1030,7 +1028,7 @@ var onLocationChange = (_payload, { publish, state: state2 }) => {
   publish(routeChangeEvent, { host, path, query });
 };
 var setupHistory = (app) => {
-  const { publish, subscribe, state: state2 } = app;
+  const { publish, subscribe, state: state2, window } = app;
   createRouteState(state2);
   window.addEventListener("popstate", () => publish(locationChangeEvent));
   subscribe(locationChangeEvent, onLocationChange);
@@ -1051,16 +1049,16 @@ var findHref = (node2) => {
 // src/navigation/setupNavigation.js
 var linkNavigationEvent = "goToHref";
 var programmaticNavigationEvent = "navigate";
-var navigate = (path, { publish }) => {
+var navigate = (path, { publish, window }) => {
   window.history.pushState(null, "", path);
   publish(locationChangeEvent);
 };
-var onLinkClick = (domEvent, { publish }) => {
+var onLinkClick = (domEvent, { publish, window }) => {
   if (!domEvent || !domEvent.target)
     return;
   domEvent.preventDefault();
   const href = findHref(domEvent.target);
-  navigate(href, { publish });
+  navigate(href, { publish, window });
 };
 var setupNavigation = (app) => {
   const { subscribe } = app;
@@ -1081,14 +1079,19 @@ var setupState = (app) => {
 };
 var connectBusToState = (app) => {
   const { bus } = app;
-  bus.addListenerOptions({ state: app.state });
+  bus.addListenerOptions({
+    state: app.state,
+    document: app.document,
+    window: app.window
+  });
 };
-var setupRenderKit = (app, document) => {
+var setupRenderKit = (app) => {
   app.renderKit = {
     publish: app.publish,
     subscribe: app.subscribe,
     state: app.state,
-    document
+    document: app.document,
+    window: app.window
   };
 };
 var triggerRoute = (app) => {
@@ -1102,12 +1105,26 @@ var addRender = (app) => {
     return render(template, selector, app.renderKit);
   };
 };
-var createApp = (document = window.document) => {
+var setupDomEnvironment = (app, domEnvironment) => {
+  const { window, document } = domEnvironment;
+  if (window) {
+    app.window = window;
+    app.document = window.document;
+  } else if (document) {
+    app.window = document.defaultView;
+    app.document = document;
+  } else {
+    app.window = window;
+    app.document = window?.document;
+  }
+};
+var createApp = (domEnvironment) => {
   const app = {};
+  setupDomEnvironment(app, domEnvironment || {});
   setupBus(app);
   setupState(app);
   connectBusToState(app);
-  setupRenderKit(app, document);
+  setupRenderKit(app);
   setupHistory(app);
   setupNavigation(app);
   triggerRoute(app);

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "jaxs",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "Modular J/TSX application framework",
   "module": "src/jaxs.ts",
+  "exports": {
+    ".": "./dist/jaxs.js",
+    "./views": "./src/views.js"
+  },
   "type": "module",
   "devDependencies": {
     "@types/bun": "latest",

package/src/app.ts

@@ -1,4 +1,4 @@
-import type { App, BusPublish, BusSubscribe } from './types';
+import type { App, BusPublish, BusSubscribe, DomEnvironment } from './types';
 import { createBus } from './messageBus';
 import { State } from './state'
 import {
@@ -23,15 +23,20 @@ const setupState = (app: App) => {
 
 const connectBusToState = (app: App) => {
   const { bus } = app;
-  bus.addListenerOptions({ state: app.state });
+  bus.addListenerOptions({
+    state: app.state,
+    document: app.document,
+    window: app.window,
+  });
 };
 
-const setupRenderKit = (app: App, document: Document) => {
+const setupRenderKit = (app: App) => {
   app.renderKit = {
     publish: app.publish as BusPublish,
     subscribe: app.subscribe as BusSubscribe,
     state: app.state as State,
-    document,
+    document: app.document,
+    window: app.window,
   };
 };
 
@@ -48,13 +53,28 @@ const addRender = (app: App) => {
   };
 };
 
-export const createApp = (document = window.document) => {
+const setupDomEnvironment = (app: App, domEnvironment: DomEnvironment) => {
+  const { window, document } = domEnvironment
+  if (window) {
+    app.window = window
+    app.document = window.document
+  } else if (document) {
+    app.window = document.defaultView as Window
+    app.document = document
+  } else {
+    app.window = window
+    app.document = window?.document
+  }
+}
+
+export const createApp = (domEnvironment: DomEnvironment | undefined) => {
   const app = {} as App;
+  setupDomEnvironment(app, domEnvironment || {} as DomEnvironment)
 
   setupBus(app);
   setupState(app);
   connectBusToState(app);
-  setupRenderKit(app, document);
+  setupRenderKit(app);
   setupHistory(app);
   setupNavigation(app);
   triggerRoute(app);

package/src/navigation/setupHistory.js

@@ -15,7 +15,7 @@ export const extractQueryParams = (queryString) => {
     }, {})
 }
 
-export const onLocationChange = (_payload, { publish, state }) => {
+export const onLocationChange = (_payload, { publish, state, window }) => {
   const { host, pathname, search } = window.location
   const path = pathname
   const query = extractQueryParams(search)
@@ -31,7 +31,7 @@ export const onLocationChange = (_payload, { publish, state }) => {
 }
 
 export const setupHistory = (app) => {
-  const { publish, subscribe, state } = app
+  const { publish, subscribe, state, window } = app
   createRouteState(state)
   window.addEventListener('popstate', () => publish(locationChangeEvent))
   subscribe(locationChangeEvent, onLocationChange)

package/src/navigation/setupNavigation.js

@@ -4,17 +4,17 @@ import { locationChangeEvent } from './setupHistory'
 export const linkNavigationEvent = 'goToHref'
 export const programmaticNavigationEvent = 'navigate'
 
-export const navigate = (path, { publish }) => {
+export const navigate = (path, { publish, window }) => {
   window.history.pushState(null, '', path)
   publish(locationChangeEvent)
 }
 
-export const onLinkClick = (domEvent, { publish }) => {
+export const onLinkClick = (domEvent, { publish, window }) => {
   if (!domEvent || !domEvent.target) return
   domEvent.preventDefault()
 
   const href = findHref(domEvent.target)
-  navigate(href, { publish })
+  navigate(href, { publish, window })
 }
 
 export const setupNavigation = (app) => {

package/src/rendering/dom/create.ts

@@ -45,12 +45,10 @@ export const setEventsOnElement = (
 };
 
 export const createNode = (type: string, document: Document) => {
-  document = document || window.document;
   return document.createElement(type);
 };
 
 export const createTextNode = (value: string, document: Document) => {
-  document = document || window.document;
   return document.createTextNode(value);
 };
 

package/src/rendering/dom/svg.ts

@@ -5,7 +5,7 @@ export const isSvgTag = (tagType: string) => tagType === 'svg'
 export const isSvg = (element: SVGElement) => element.namespaceURI === namespace
 
 export const createSvgNode = (type: string, attributes: Attributes, renderKit: RenderKit) => {
-  const document = renderKit && renderKit.document || window.document;
+  const { document } = renderKit
   const node = document.createElementNS(namespace, type)
 
   for (const key in attributes) {

package/src/types.ts

@@ -4,6 +4,7 @@ export type DomEventPublisher = (eventName: string, domEvent: Event) => void;
 
 export type RenderKit = {
   document: Document;
+  window: Window;
   publish: DomEventPublisher;
   subscribe: BusSubscribe;
   state: State;
@@ -149,4 +150,11 @@ export type App = {
   state?: State
   renderKit: RenderKit;
   render: (template: Template, selector: string) => Template;
+  window: Window;
+  document: Document;
 };
+
+export type DomEnvironment = {
+  document?: Document;
+  window?: Window; 
+}