Merge pull request #656 from smapiot/develop

Release 1.4.1

.github/workflows/size.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Setup node
         uses: actions/setup-node@v1
         with:
-          node-version: "16.20.0"
+          node-version: "20.10.0"
       - run: yarn install
       - name: Report changes
         run: node ./tools/size-reporter.mjs

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Piral Changelog
 
+## 1.4.1 (tbd)
+
+- Fixed issue with pilet injector for certain apps in monorepos
+- Added support for middleware functions in `piral-fetch` (#645)
+
 ## 1.4.0 (December 12, 2023)
 
 - Fixed issue when target tarball is part of tarball content in `pilet pack` (#642)

mlc_config.json

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

src/converters/README.md

@@ -17,6 +17,7 @@ Piral is developed as a monorepo.
 - [piral-ng](./piral-ng/README.md) provides integration for *Angular*
 - [piral-ngjs](./piral-ngjs/README.md) provides integration for *Angular.js*
 - [piral-preact](./piral-preact/README.md) provides integration for *Preact*
+- [piral-react](./piral-react/README.md) provides integration for *React* 16+
 - [piral-react-15](./piral-react-15/README.md) provides integration for *React* in version 15
 - [piral-riot](./piral-riot/README.md) provides integration for *Riot*
 - [piral-solid](./piral-solid/README.md) provides integration for *Solid.js*

src/converters/piral-react-15/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 - 2023 smapiot
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/converters/piral-react-15/README.md

@@ -0,0 +1,105 @@
+[![Piral Logo](https://github.com/smapiot/piral/raw/main/docs/assets/logo.png)](https://piral.io)
+
+# [Piral React 15](https://piral.io) · [![GitHub License](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/smapiot/piral/blob/main/LICENSE) [![npm version](https://img.shields.io/npm/v/piral-react-15.svg?style=flat)](https://www.npmjs.com/package/piral-react-15) [![tested with jest](https://img.shields.io/badge/tested_with-jest-99424f.svg)](https://jestjs.io) [![Gitter Chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/piral-io/community)
+
+This is a plugin that only has a peer dependency to `react@^15` and `react-dom@^15`. What `piral-react-15` brings to the table is a set of Pilet API extensions that can be used with `piral` or `piral-core`.
+
+The set includes a React 15.x converter for any component registration, as well as a `fromReact15` shortcut and a `React15Extension` component.
+
+By default, these API extensions are not integrated in `piral`, so you'd need to add them to your Piral instance.
+
+## Documentation
+
+The following functions are brought to the Pilet API.
+
+### `fromReact15()`
+
+Transforms a standard React 15.x component into a component that can be used in Piral, essentially wrapping it with a reference to the corresponding converter.
+
+### `React15Extension`
+
+The extension slot component to be used in React 15.x components.
+
+## Usage
+
+::: summary: For pilet authors
+
+You can use the `fromReact15` function from the Pilet API to convert your React v15 components to components usable by your Piral instance.
+
+Example use:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { React15Page } from './React15Page';
+
+export function setup(piral: PiletApi) {
+  piral.registerPage('/sample', piral.fromReact15(React15Page));
+}
+```
+
+Within React v15 components the Piral React v15 extension component can be used by referring to `React15Extension`, e.g.,
+
+```jsx
+<React15Extension name="name-of-extension" />
+```
+
+Alternatively, if `piral-react-15` has not been added to the Piral instance you can install and use the package also from a pilet directly.
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { fromReact15 } from 'piral-react-15/convert';
+import { React15Page } from './React15Page';
+
+export function setup(piral: PiletApi) {
+  piral.registerPage('/sample', fromReact15(React15Page));
+}
+```
+
+:::
+
+::: summary: For Piral instance developers
+
+Using React v15 with Piral is as simple as installing `piral-react-15` and `react-15`. For `react-15` add the following two packages to your project's dependencies:
+
+```json
+{
+  "dependencies": {
+    "react-15`": "npm:react@^15",
+    "react-dom-15": "npm:react@^15"
+  }
+}
+```
+
+Now you are ready to use the `piral-react-15` converter:
+
+```ts
+import { createReact15Api } from 'piral-react-15';
+```
+
+The integration looks like:
+
+```ts
+const instance = createInstance({
+  // important part
+  plugins: [createReact15Api()],
+  // ...
+});
+```
+
+The `react-15` package (or whatever alias you've chosen) should be shared with the pilets via the *package.json*:
+
+```json
+{
+  "importmap": {
+    "imports": {
+      "react-15": ""
+    }
+  }
+}
+```
+
+:::
+
+## License
+
+Piral is released using the MIT license. For more information see the [license file](./LICENSE).

src/converters/piral-react-15/convert.ts

@@ -0,0 +1,29 @@
+import { createConverter } from './esm/converter';
+
+export interface HtmlComponent<TProps> {
+  component: {
+    mount(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+    update?(element: HTMLElement, props: TProps, ctx: any, locals: any): void;
+    unmount?(element: HTMLElement, locals: any): void;
+  };
+  type: 'html';
+}
+
+export interface React15Converter {
+  (...params: Parameters<ReturnType<typeof createConverter>>): HtmlComponent<any>;
+}
+
+export function createReact15Converter(...params: Parameters<typeof createConverter>) {
+  const convert = createConverter(...params);
+  const Extension = convert.Extension;
+  const from: React15Converter = (root) => ({
+    type: 'html',
+    component: convert(root),
+  });
+
+  return { from, Extension };
+}
+
+const { from: fromReact15, Extension: React15Extension } = createReact15Converter();
+
+export { fromReact15, React15Extension };

src/converters/piral-react-15/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "piral-react-15",
+  "version": "1.4.0",
+  "description": "Plugin for integrating React v15 components in Piral.",
+  "keywords": [
+    "piral",
+    "pilet-api",
+    "smapiot",
+    "portal",
+    "modules",
+    "api",
+    "plugin",
+    "plugin-converter",
+    "react15"
+  ],
+  "author": "smapiot",
+  "homepage": "https://piral.io",
+  "license": "MIT",
+  "module": "esm/index.js",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./lib/index.js"
+    },
+    "./convert": {
+      "import": "./convert.js"
+    },
+    "./esm/*": {
+      "import": "./esm/*"
+    },
+    "./lib/*": {
+      "require": "./lib/*"
+    },
+    "./_/*": {
+      "import": "./esm/*.js",
+      "require": "./lib/*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "sideEffects": false,
+  "files": [
+    "esm",
+    "lib",
+    "src",
+    "convert.d.ts",
+    "convert.js"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/smapiot/piral.git"
+  },
+  "bugs": {
+    "url": "https://github.com/smapiot/piral/issues"
+  },
+  "scripts": {
+    "cleanup": "rimraf esm lib convert.d.ts convert.js",
+    "build": "yarn build:commonjs && yarn build:esnext && yarn build:convert",
+    "build:convert": "tsc convert.ts --skipLibCheck --declaration --module esnext",
+    "build:commonjs": "tsc --project tsconfig.json --outDir lib --module commonjs",
+    "build:esnext": "tsc --project tsconfig.json --outDir esm --module esnext",
+    "typedoc": "typedoc --json ../../../docs/types/piral-react-15.json src --exclude \"src/**/*.test.*\"",
+    "test": "echo \"Error: run tests from root\" && exit 1"
+  },
+  "devDependencies": {
+    "piral-core": "^1.4.0",
+    "react-15": "npm:react@15",
+    "react-dom-15": "npm:react-dom@15"
+  }
+}

src/converters/piral-react-15/src/converter.ts

@@ -0,0 +1,30 @@
+import type { ForeignComponent, BaseComponentProps } from 'piral-core';
+import type { ComponentType } from 'react-15';
+import { createExtension } from './extension';
+import { mountReact15, unmountReact15 } from './mount';
+
+export interface React15ConverterOptions {
+  /**
+   * Defines the name of the root element.
+   * @default piral-slot
+   */
+  rootName?: string;
+}
+
+export function createConverter(config: React15ConverterOptions = {}) {
+  const { rootName = 'piral-slot' } = config;
+  const Extension = createExtension(rootName);
+  const convert = <TProps extends BaseComponentProps>(root: ComponentType<TProps>): ForeignComponent<TProps> => ({
+    mount(el, props, ctx) {
+      mountReact15(el, root, props, ctx);
+    },
+    update(el, props, ctx) {
+      mountReact15(el, root, props, ctx);
+    },
+    unmount(el) {
+      unmountReact15(el);
+    },
+  });
+  convert.Extension = Extension;
+  return convert;
+}

src/converters/piral-react-15/src/create.ts

@@ -0,0 +1,28 @@
+import type { PiralPlugin } from 'piral-core';
+import { createConverter, React15ConverterOptions } from './converter';
+import type { PiletReact15Api } from './types';
+
+/**
+ * Available configuration options for the React 15.x plugin.
+ */
+export interface React15Config extends React15ConverterOptions {}
+
+/**
+ * Creates Pilet API extensions for integrating React 15.x.
+ */
+export function createReact15Api(config: React15Config = {}): PiralPlugin<PiletReact15Api> {
+  return (context) => {
+    const convert = createConverter(config);
+    context.converters.react15 = ({ root }) => convert(root);
+
+    return {
+      fromReact15(root) {
+        return {
+          type: 'react15',
+          root,
+        };
+      },
+      React15Extension: convert.Extension,
+    };
+  };
+}

src/converters/piral-react-15/src/extension.ts

@@ -0,0 +1,62 @@
+import type { ExtensionSlotProps, PiletApi } from 'piral-core';
+import { createElement, Component } from 'react-15';
+import { anyPropType } from './mount';
+
+function compareObjects(a: any, b: any) {
+  for (const i in a) {
+    if (!(i in b)) {
+      return false;
+    }
+  }
+
+  for (const i in b) {
+    if (!compare(a[i], b[i])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function compare<T>(a: T, b: T) {
+  if (a !== b) {
+    const ta = typeof a;
+    const tb = typeof b;
+
+    if (ta === tb && ta === 'object' && a && b) {
+      return compareObjects(a, b);
+    }
+
+    return false;
+  }
+
+  return true;
+}
+
+export function createExtension(rootName: string) {
+  const React15Extension: any = class extends Component<ExtensionSlotProps> {
+    static contextTypes = {
+      piral: anyPropType,
+    };
+
+    private onRefChange = (element: HTMLElement) => {
+      if (element) {
+        const { piral } = this.context as { piral: PiletApi };
+        element.innerHTML = '';
+        piral.renderHtmlExtension(element, this.props);
+      }
+    };
+
+    shouldComponentUpdate(nextProps: ExtensionSlotProps) {
+      return !compare(this.props, nextProps);
+    }
+
+    render() {
+      return createElement(rootName, {
+        ref: this.onRefChange,
+      });
+    }
+  };
+
+  return React15Extension;
+}

src/converters/piral-react-15/src/index.ts

@@ -0,0 +1,2 @@
+export * from './create';
+export * from './types';