piral-core 1.8.0-beta.7544 → 1.8.0-beta.7655

package/lib/utils/state.js.map

@@ -1 +1 @@
-{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/utils/state.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"state.js","sourceRoot":"","sources":["../../src/utils/state.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-core",
-  "version": "1.8.0-beta.7544",
+  "version": "1.8.0-beta.7655",
   "description": "The core library for creating a Piral instance.",
   "keywords": [
     "portal",
@@ -39,7 +39,8 @@
     "lib",
     "src",
     "app.codegen",
-    "app.codegen.d.ts"
+    "app.codegen.d.ts",
+    "style.css"
   ],
   "funding": {
     "type": "github",
@@ -61,8 +62,8 @@
     "test": "echo \"Error: run tests from root\" && exit 1"
   },
   "dependencies": {
-    "piral-base": "1.8.0-beta.7544",
-    "piral-debug-utils": "1.8.0-beta.7544",
+    "piral-base": "1.8.0-beta.7655",
+    "piral-debug-utils": "1.8.0-beta.7655",
     "zustand": "^3.0.0"
   },
   "devDependencies": {
@@ -82,5 +83,5 @@
     "react-router-dom",
     "tslib"
   ],
-  "gitHead": "007e0558e140cf11ba91b5f30d991ed593c18b60"
+  "gitHead": "68e1232fe36c56cf7edaa546389bc635693907bf"
 }

package/src/defaults/DefaultRouteSwitch_v7.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+//@ts-ignore
+import { Routes, Route } from 'react-router';
+import { RouteSwitchProps } from '../types';
+
+export const DefaultRouteSwitch: React.FC<RouteSwitchProps> = ({ paths, NotFound, ...props }) => {
+  return (
+    <Routes {...props}>
+      {paths.map(({ path, Component }) => (
+        //@ts-ignore
+        <Route key={path} path={path} element={<Component />} />
+      ))}
+      {
+        //@ts-ignore
+        <Route path="*" element={<NotFound />} />
+      }
+    </Routes>
+  );
+};
+DefaultRouteSwitch.displayName = 'DefaultRouteSwitch';

package/src/defaults/DefaultRouter_v7.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+//@ts-ignore
+import { BrowserRouter } from 'react-router';
+import { RouterProps } from '../types';
+
+export const DefaultRouter: React.FC<RouterProps> = ({ children, publicPath }) => {
+  return <BrowserRouter basename={publicPath}>{children}</BrowserRouter>;
+};
+DefaultRouter.displayName = 'DefaultRouter';

package/src/defaults/navigator_v7.tsx

@@ -0,0 +1,97 @@
+import * as React from 'react';
+//@ts-ignore
+import { UNSAFE_NavigationContext as RouterContext, Navigate, useLocation } from 'react-router';
+import { NavigationApi } from '../types';
+
+let _nav: any;
+const _noop = () => {};
+
+export function useRouterContext() {
+  return React.useContext(RouterContext);
+}
+
+export function useCurrentNavigation() {
+  const ctx: any = useRouterContext();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    if (_nav) {
+      window.dispatchEvent(
+        new CustomEvent('piral-navigate', {
+          detail: {
+            location,
+          },
+        }),
+      );
+    }
+  }, [location]);
+
+  React.useEffect(() => {
+    _nav = ctx.navigator;
+
+    return () => {
+      _nav = undefined;
+    };
+  }, []);
+}
+
+export function createRedirect(to: string) {
+  return () => <Navigate to={to} />;
+}
+
+export function createNavigation(publicPath: string): NavigationApi {
+  const enhance = (info) => ({
+    ...info,
+    location: {
+      get href() {
+        return _nav.createHref(info.location);
+      },
+      ...info.location,
+    },
+  });
+
+  return {
+    get path() {
+      const loc = _nav ? _nav.location : location;
+      return loc.pathname;
+    },
+    get url() {
+      const loc = _nav ? _nav.location : location;
+      return `${loc.pathname}${loc.search}${loc.hash}`;
+    },
+    push(target, state) {
+      if (_nav) {
+        _nav.push(target, state);
+      }
+    },
+    replace(target, state) {
+      if (_nav) {
+        _nav.replace(target, state);
+      }
+    },
+    go(n) {
+      if (_nav) {
+        _nav.go(n);
+      }
+    },
+    block(blocker) {
+      if (!_nav) {
+        return _noop;
+      }
+      return _nav.block((transition) => blocker(enhance(transition)));
+    },
+    listen(listener) {
+      const handler = (e: CustomEvent) => listener(enhance(e.detail));
+
+      window.addEventListener('piral-navigate', handler);
+
+      return () => {
+        window.removeEventListener('piral-navigate', handler);
+      };
+    },
+    get router() {
+      return _nav;
+    },
+    publicPath,
+  };
+}

package/src/modules/element.test.ts

@@ -8,6 +8,9 @@ import { createActions } from '../state';
 import { renderElement } from './element';
 
 vitest.mock('../../app.codegen', () => ({
+  applyStyle: vitest.fn(element => {
+    element.style.display = 'contents';
+  }),
   createNavigation: vitest.fn(publicPath => ({
     publicPath,
   })),

package/src/modules/element.ts

@@ -1,4 +1,5 @@
 import { ExtensionSlot } from '../components';
+import { applyStyle } from '../../app.codegen';
 import { Disposable, GlobalStateContext, BaseExtensionSlotProps } from '../types';
 import {
   tryParseJson,
@@ -20,8 +21,6 @@ export interface Updatable {
 }
 
 if (typeof window !== 'undefined' && 'customElements' in window) {
-  const contents = 'contents';
-
   /**
    * This is a nice abstraction allowing anyone to actually use the extension system
    * brought by Piral. Not all props of the extension system are actually exposed.
@@ -113,7 +112,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     }
 
     connectedCallback() {
-      this.style.display = contents;
+      applyStyle(this);
 
       if (this.isConnected) {
         this.dispatchEvent(
@@ -168,7 +167,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
    */
   class PiralPortal extends HTMLElement {
     connectedCallback() {
-      this.style.display = contents;
+      applyStyle(this);
     }
   }
 
@@ -187,7 +186,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
    */
   class PiralSlot extends HTMLElement {
     connectedCallback() {
-      this.style.display = contents;
+      applyStyle(this);
     }
   }
 
@@ -220,7 +219,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     static contentAssignments = {};
 
     connectedCallback() {
-      this.style.display = contents;
+      applyStyle(this);
       const cid = this.getAttribute('cid');
       const content = PiralContent.contentAssignments[cid];
       const portal = this.closest('piral-portal');
@@ -264,7 +263,7 @@ if (typeof window !== 'undefined' && 'customElements' in window) {
     }
 
     connectedCallback() {
-      this.style.display = contents;
+      applyStyle(this);
       this.deferEvent('add-component');
     }
 

package/src/tools/codegen.ts

@@ -86,6 +86,7 @@ interface CodegenOptions {
   externals: Array<string>;
   publicPath: string;
   isolation: 'classic' | 'modern';
+  internalStyles: 'inline' | 'sheet' | 'none';
   debug?: {
     viewState?: boolean;
     loadPilets?: boolean;
@@ -97,6 +98,27 @@ interface CodegenOptions {
   emulator: boolean;
 }
 
+export function createBasicAppFunc(imports: Array<string>, exports: Array<string>, opts: CodegenOptions) {
+  switch (opts.internalStyles) {
+    case 'sheet':
+      imports.push(`import 'piral-core/style.css';`);
+      // no return - we fall through and also include the dummy applyStyle for "none"
+    case 'none':
+      exports.push(`
+        export function applyStyle(element) {}
+      `);
+      return;
+    case 'inline':
+    default:
+      exports.push(`
+        export function applyStyle(element) {
+          element.style.display = 'contents';
+        }
+      `);
+      return;
+  }
+}
+
 export function createDependencies(imports: Array<string>, exports: Array<string>, opts: CodegenOptions) {
   const { root, appName, externals, shared, origin } = opts;
   const assignments: Array<string> = [];
@@ -142,7 +164,6 @@ export function createDependencies(imports: Array<string>, exports: Array<string
   if (asyncAssignments.length) {
     imports.push(`import { registerModule } from 'piral-base'`);
     assignments.push(...asyncAssignments);
-
   }
 
   exports.push(`
@@ -164,17 +185,26 @@ export function createDefaultState(imports: Array<string>, exports: Array<string
   );
 
   if (routerVersion < 6) {
+    // React Router v5
     imports.push(
       `import { DefaultRouter } from 'piral-core/${cat}/defaults/DefaultRouter_v5.js';`,
       `import { DefaultRouteSwitch } from 'piral-core/${cat}/defaults/DefaultRouteSwitch_v5.js';`,
       `import { createRedirect, createNavigation, useCurrentNavigation, useRouterContext } from 'piral-core/${cat}/defaults/navigator_v5.js'`,
     );
-  } else {
+  } else if (routerVersion === 6) {
+    // React Router v6
     imports.push(
       `import { DefaultRouter } from 'piral-core/${cat}/defaults/DefaultRouter_v6.js';`,
       `import { DefaultRouteSwitch } from 'piral-core/${cat}/defaults/DefaultRouteSwitch_v6.js';`,
       `import { createRedirect, createNavigation, useCurrentNavigation, useRouterContext } from 'piral-core/${cat}/defaults/navigator_v6.js'`,
     );
+  } else {
+    // React Router v7
+    imports.push(
+      `import { DefaultRouter } from 'piral-core/${cat}/defaults/DefaultRouter_v7.js';`,
+      `import { DefaultRouteSwitch } from 'piral-core/${cat}/defaults/DefaultRouteSwitch_v7.js';`,
+      `import { createRedirect, createNavigation, useCurrentNavigation, useRouterContext } from 'piral-core/${cat}/defaults/navigator_v7.js'`,
+    );
   }
 
   exports.push(`

package/style.css

@@ -0,0 +1,3 @@
+piral-extension, piral-component, piral-content, piral-portal, piral-slot {
+  display: contents;
+}