Release 1.1.0

.github/workflows/docs.yml

@@ -1,10 +1,6 @@
 name: check-documentation
 
 on:
-  push:
-    branches: [documentation, develop]
-  pull_request:
-    branches: [documentation, develop]
   schedule:
     - cron: "0 9 * * *"
 

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Piral Changelog
 
+## 1.1.0 (tbd)
+
+- Fixed retrieval of dep versions not exporting their *package.json*
+- Fixed calling custom Webpack config throwing an exception
+- Fixed absolute to a relative path for shared dependencies
+- Updated dependencies of `piral-cli-webpack5`
+- Added support for optionally centrally shared dependencies
+- Added possibility to extend notification types to `piral-notifications`
+- Added possibility to further extend options w.r.t. menu type in `piral-menu`
+- Added lint rule for detecting potential CSS conflicts in pilets (#611)
+
 ## 1.0.2 (June 27, 2023)
 
 - Fixed support for `piral-extension` inside shadow DOM

docs/articles.md

@@ -15,7 +15,7 @@ title: Articles About Piral
 - [Microfrontends on Azure](https://www.youtube.com/watch?v=_q4JDrIMvlA)
 - [Microfrontends with Blazor](https://www.youtube.com/watch?v=npff2NjVXEE)
 - [Microfrontends with React](https://www.youtube.com/watch?v=kG7gIF16cOk)
-- [Axiom on Microfrontends](https://www.youtube.com/watch?v=u6v8wSzifPc)
+- [Axinom on Microfrontends](https://www.youtube.com/watch?v=u6v8wSzifPc)
 - [Introduction to Piral Inspector](https://www.youtube.com/watch?v=8CE7_X01NmM)
 - [Piral Community Standup](https://www.youtube.com/watch?v=ZzqnE7XO6Tk&list=PLQ9i8GS-LNXkG1bDpT54XxOTisyRh3Rin)
 

docs/commands/build-pilet.md

@@ -66,7 +66,7 @@ Sets the maximum number of concurrent build jobs.
 
 
 - Type: `number`
-- Default: `16`
+- Default: `12`
 
 ### `--source-maps`
 

docs/commands/debug-pilet.md

@@ -74,7 +74,7 @@ Sets the maximum number of concurrent build jobs.
 
 
 - Type: `number`
-- Default: `16`
+- Default: `12`
 
 ### `--open`
 

docs/commands/new-piral.md

@@ -92,7 +92,7 @@ Sets the tag or version of the package to install. By default, this uses the ver
 
 - Aliases: `--piral-version`
 - Type: `string`
-- Default: `"1.0.0"`
+- Default: `"1.0.2"`
 
 ### `--force-overwrite`
 

docs/commands/validate-pilet.md

@@ -81,6 +81,12 @@ Checks that no other (third-party) dependencies are bundled in.
 
 **Options**: `'ignore' | 'active'`
 
+### `has-non-conflicting-css`
+
+Checks if a pilet might cause a CSS conflict. A score of 100 means that there is the least chance of a CSS conflict, while a score of 0 means that a CSS conflict is most likely. Negative values yield a warning if the CSS score is below the given number. Positive values yield an error if the CSS score is below the given number. A value of 0 turns this validation off. By default, a pilet's stylesheet having a CSS score of below 50 will result in a warning.
+
+**Options**: `number`
+
 ### `stays-small`
 
 Checks if the main bundle of the pilet is not exceeding a given threshold. The pilet must have been built beforehand for this validation to be conclusive. Negative values yield a warning if the absolute size in kB is exceeded. Positive values yield an error if the absolute size in kB is exceeded. A value of 0 turns this validation off. By default, a pilet's main bundle exceeding 50 kB will result in a warning.

docs/concepts/I08-importmap.md

@@ -98,6 +98,17 @@ This way, you can either create reusable packages containing importmaps or easil
 }
 ```
 
+Classically, all centrally shared dependencies are delivered with the app shell ("single bundle"). In some case it might make sense to load a shared dependency only when needed. To enable this behavior you can suffix the dependency with the `?` character - indicating that the shared dependency is optional:
+
+```json
+{
+  "imports": {
+    "lodash?": ""
+  },
+  "inherit": []
+}
+```
+
 ## Pilet Importmaps
 
 For pilets the story is similar, but not exactly the same. As with a Piral instance you can define a key `importmap` in the *package.json* of the pilet. Likewise, you can either have an importmap definition in there, such as
@@ -221,6 +232,16 @@ Another possibility is that remote packages can be added:
 
 In the case of remote packages, no side-bundle is created. Instead, the given URL will be used as a side-bundle. Remote packages will give you a neat way to restrict shared dependencies to a pre-defined pool, which is then re-used consistently.
 
+To make a shared dependency optional (this is the default for pilets anyway, but needs to be done explicitly in the app shell) you need to suffix it with a question mark.
+
+```json
+{
+  "imports": {
+    "[email protected]?": "."
+  }
+}
+```
+
 ## Inheritance
 
 In addition to the `imports` key, the `piral-cli` also supports another key called `inherit`. This is just an array of strings resolving to other packages or importmaps. For instance, the following importmap inherits the importmap from `piral-core`:

mlc_config.json

@@ -14,6 +14,12 @@
     },
     {
       "pattern": "^https://unpkg.com/"
+    },
+    {
+      "pattern": "^https://aka.ms/"
+    },
+    {
+      "pattern": "^https://azure.microsoft.com/free"
     }
   ],
   "aliveStatusCodes": [429, 200]

src/framework/piral-core/app.codegen

@@ -16,6 +16,7 @@ module.exports = function () {
   const debug = typeof cfg.debugTools === 'boolean' ? cfg.debugTools : !!process.env.DEBUG_PIRAL;
   const opts = {
     root,
+    origin: __dirname,
     cat: process.env.NODE_ENV === 'test' ? 'src' : '_',
     appName: process.env.BUILD_PCKG_NAME || '',
     externals: (process.env.SHARED_DEPENDENCIES || '').split(',').filter(Boolean),

src/framework/piral-core/app.codegen.d.ts

@@ -6,7 +6,7 @@ import type { AppPath, GlobalState, GlobalStateContext, NavigationApi } from './
 
 export const publicPath: string;
 
-export function createNavigation(): NavigationApi;
+export function createNavigation(publicPath: string): NavigationApi;
 
 export function createDefaultState(): GlobalState;
 

src/framework/piral-core/src/Piral.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { createInstance } from './createInstance';
 import { PiralView, RegisteredRouter } from './components';
 import { PiralContext } from './PiralContext';
-import { publicPath } from '../app.codegen';
 import type { PiralProps } from './types';
 
 /**
@@ -22,7 +21,7 @@ const app = (
  */
 export const Piral: React.FC<PiralProps> = ({ instance = createInstance(), breakpoints, children }) => (
   <PiralContext instance={instance}>
-    <RegisteredRouter publicPath={publicPath}>
+    <RegisteredRouter publicPath={instance.context.navigation.publicPath}>
       <PiralView breakpoints={breakpoints}>{children}</PiralView>
     </RegisteredRouter>
   </PiralContext>

src/framework/piral-core/src/components/PiralRoutes.test.tsx

@@ -14,28 +14,19 @@ const mountWithRouter = (node, url = '/') =>
 
 jest.mock('../hooks');
 
-(hooks as any).useRoutes = () => [
-  {
-    path: '/',
-    Component: StubHome,
-  },
-  {
-    path: '/custom',
-    Component: StubCustomPage,
-  },
-  {
-    path: '/foo',
-    Component: StubFooPage,
-  },
-  {
-    path: '/foo/bar',
-    Component: StubFooBarPage,
-  },
-  {
-    path: '/bar',
-    Component: StubBarPage,
-  },
-];
+(hooks as any).useGlobalState = (cb) =>
+  cb({
+    routes: {
+      '/': StubHome,
+      '/custom': StubCustomPage,
+      '/foo': StubFooPage,
+      '/foo/bar': StubFooBarPage,
+      '/bar': StubBarPage,
+    },
+    registry: {
+      pages: {},
+    },
+  });
 
 const StubHome: React.FC = (props) => <div role="home" />;
 StubHome.displayName = 'StubHome';

src/framework/piral-core/src/components/PiralRoutes.tsx

@@ -1,7 +1,19 @@
 import * as React from 'react';
 import { RouteComponentProps, SwitchProps } from 'react-router';
-import { useRoutes } from '../hooks';
-import { RouteSwitchProps } from '../types';
+import { useGlobalState } from '../hooks';
+import { RouteSwitchProps, AppPath } from '../types';
+import { useRouteFilter } from '../../app.codegen';
+
+function useRoutes() {
+  const routes = useGlobalState((s) => s.routes);
+  const pages = useGlobalState((s) => s.registry.pages);
+  const paths: Array<AppPath> = [];
+
+  Object.keys(routes).map((path) => paths.push({ path, Component: routes[path] }));
+  Object.keys(pages).map((path) => paths.push({ path, Component: pages[path].component }));
+
+  return useRouteFilter(paths);
+}
 
 /**
  * The props used by the PiralRoutes component.

src/framework/piral-core/src/components/wrapComponent.tsx

@@ -3,7 +3,6 @@ import { PortalRenderer } from './PortalRenderer';
 import { ForeignComponentContainer } from './ForeignComponentContainer';
 import { useGlobalStateContext } from '../hooks';
 import { convertComponent, none } from '../utils';
-import { publicPath } from '../../app.codegen';
 import type { AnyComponent, ComponentConverters, ForeignComponent, PiletApi, BaseComponentProps } from '../types';
 
 // this is an arbitrary start number to have 6 digits
@@ -34,7 +33,7 @@ function wrapForeignComponent<T>(
     const { destroyPortal, navigation } = useGlobalStateContext();
     const id = React.useMemo(() => (portalIdBase++).toString(26), none);
     // router added for backwards compatibility
-    const context = React.useMemo(() => ({ publicPath, navigation, router: navigation.router }), []);
+    const context = React.useMemo(() => ({ publicPath: navigation.publicPath, navigation, router: navigation.router }), []);
     const innerProps = React.useMemo(() => ({ ...props, ...captured }), [props]);
 
     React.useEffect(() => () => destroyPortal(id), none);

src/framework/piral-core/src/defaults/DefaultErrorInfo.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { ExtensionSlot, SwitchErrorInfo } from '../components';
+import { ExtensionSlot } from '../components/ExtensionSlot';
+import { SwitchErrorInfo } from '../components/SwitchErrorInfo';
 import { ErrorInfoProps } from '../types';
 
 /**

src/framework/piral-core/src/defaults/navigator_none.tsx

@@ -12,7 +12,7 @@ export function createRedirect() {
   return () => null;
 }
 
-export function createNavigation(): NavigationApi {
+export function createNavigation(publicPath: string): NavigationApi {
   return {
     get path() {
       return location.pathname;
@@ -31,5 +31,6 @@ export function createNavigation(): NavigationApi {
       return _noop;
     },
     router: undefined,
+    publicPath,
   };
 }

src/framework/piral-core/src/defaults/navigator_v5.tsx

@@ -39,7 +39,7 @@ export function createRedirect(to: string) {
   return () => <Redirect to={to} />;
 }
 
-export function createNavigation(): NavigationApi {
+export function createNavigation(publicPath: string): NavigationApi {
   const enhance = (location: Location, action: Action) => ({
     action,
     location: {
@@ -95,5 +95,6 @@ export function createNavigation(): NavigationApi {
         return _nav;
       },
     },
+    publicPath,
   };
 }

src/framework/piral-core/src/defaults/navigator_v6.tsx

@@ -39,7 +39,7 @@ export function createRedirect(to: string) {
   return () => <Navigate to={to} />;
 }
 
-export function createNavigation(): NavigationApi {
+export function createNavigation(publicPath: string): NavigationApi {
   const enhance = (info) => ({
     ...info,
     location: {
@@ -92,5 +92,6 @@ export function createNavigation(): NavigationApi {
     get router() {
       return _nav;
     },
+    publicPath,
   };
 }

src/framework/piral-core/src/hooks/index.ts

@@ -3,6 +3,5 @@ export * from './actions';
 export * from './globalState';
 export * from './piletApi';
 export * from './media';
-export * from './routes';
 export * from './setter';
 export * from './sharedData';

src/framework/piral-core/src/state/createActions.ts

@@ -1,6 +1,6 @@
 import * as actions from '../actions';
 import { UseBoundStore } from 'zustand';
-import { createNavigation } from '../../app.codegen';
+import { createNavigation, publicPath } from '../../app.codegen';
 import { EventEmitter, GlobalState, GlobalStateContext, PiralDefineActions } from '../types';
 
 function createContext(state: UseBoundStore<GlobalState>, events: EventEmitter) {
@@ -10,7 +10,7 @@ function createContext(state: UseBoundStore<GlobalState>, events: EventEmitter)
     converters: {
       html: ({ component }) => component,
     },
-    navigation: createNavigation(),
+    navigation: createNavigation(publicPath),
     state,
   } as GlobalStateContext;
   return ctx;