Merge pull request #676 from smapiot/develop

Release 1.5.0

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Piral Changelog
 
+## 1.5.0 (tbd)
+
+- Fixed error when importing `once` without context (#664)
+- Fixed issue with monorepos using Rush (#667)
+- Fixed issue with blocked port in case of full debug reload (#671)
+- Fixed `@Inject` with multiple instances in `piral-ng` (#673)
+- Fixed standalone pilets depending on `@angular/compiler`
+- Removed legacy option in `piral-cli-webpack5` to support IE8
+- Removed pilet-related options in debug settings when running `piral debug` (#670)
+- Improved internal navigation Blazor pilets using `piral-blazor`
+- Updated dependencies
+- Updated `kras` to `v0.16` to fix some issues and remove `request`
+- Updated `piral publish` command to work exclusively for emulator websites
+- Added special entry point to emulator website when accessed online (#654)
+- Added feed selection view for remote emulator website (#654)
+
 ## 1.4.3 (December 26, 2023)
 
 - Fixed issue with `piral-blazor` using routing in standalone mode

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

docs/concepts/T01-emulator.md

@@ -55,6 +55,42 @@ In case you want to always produce this kind of emulator when you call `piral bu
   "$schema": "https://docs.piral.io/schemas/piral-v0.json",
   "emulator": "website"
 }
+```
+
+While the primary use case of the website emulator is a fast / always up-to-date package for local development, it also allows being used as a website (hence the name and method of deployment). By default, when accessed as a website the emulator shows a "select feed" screen. This way, the website emulator is not bound to a specific feed, but rather allows usage of essentially *any* feed.
+
+If you want to choose a specific feed then configure the behavior like:
+
+```js
+const instance = createInstance({
+  debug: {
+    // feed to be used when made available as a website emulator
+    defaultFeedUrl: 'https://feed.piral.cloud/api/v1/pilet/empty',
+  },
+  // your normal way reading pilets / for your production artifact
+  requestPilets() {
+    return fetch('https://feed.piral.cloud/api/v1/pilet/sample')
+      .then((res) => res.json())
+      .then((res) => res.items);
+  },
+});
+```
+
+Both feeds can also be the same. In this case just make a variable and reference it for both, e.g., like:
+
+```js
+const defaultFeedUrl = 'https://feed.piral.cloud/api/v1/pilet/empty';
+const instance = createInstance({
+  debug: {
+    defaultFeedUrl,
+  },
+  requestPilets() {
+    return fetch(defaultFeedUrl)
+      .then((res) => res.json())
+      .then((res) => res.items);
+  },
+});
+```
 
 ## Package Definition
 

docs/specs/feed-api-specification.md

@@ -40,7 +40,9 @@ A pilet feed service must provide an endpoint for publishing a pilet. By default
 
 The endpoint needs to accept a `POST` request using basic authentication with an `Authorization` header. Other ways of authentication may be implemented as well. The value of the basic authentication is an API key that can be fully decided by the implementation. We recommend using a base64 encoded value here.
 
-The payload of the `POST` request is form encoded with the content type `multipart/form-data`. There is a single entry named `file` transporting the contents of a file with the name *pilet.tgz*, which represents a Pilet tarball (i.e., an npm package). The content detail of this file is explained in the Pilet Specification (see references).
+The endpoint can be enhanced with an optional custom header named `X-Microfrontend-Type`. If not provided the endpoint needs to act as if the value of `X-Microfrontend-Type` was set to `npm`. Other supported values are implementation specific.
+
+The payload of the `POST` request is form encoded with the content type `multipart/form-data`. There is a single entry named `file` transporting the contents of a file with the name *pilet.tgz*, which represents a pilet tarball (i.e., an npm package). The content detail of this file is explained in the pilet Specification (see references).
 
 Other entries besides `file` may be used, too. These can be determined by implementation-dependent requirements. The `piral-cli` supports filling these fields via the `--fields[field]` flag, followed by a value, e.g., `--fields.tag next`.
 
@@ -52,6 +54,7 @@ Consider the following example:
 POST /api/v1/pilet
 Content-Type: multipart/form-data;boundary="boundary"
 Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l
+X-Microfrontend-Type: npm
 
 --boundary
 Content-Disposition: form-data; name="file"; filename="pilet.tgz"
@@ -67,6 +70,8 @@ In case of a successful upload, the HTTP response code has to be `200`. The exac
 
 In case of a bad request (e.g., missing a `file` entry, or uploading an invalid file) the HTTP status code has to be `400`. This is also true if, e.g., the `name` does not match an expected format.
 
+In case the `X-Microfrontend-Type` header was set to an unsupported value different than `npm`, the HTTP response status code has to be `400`.
+
 In case of a failed authentication, the HTTP response status code has to be `401`.
 
 In the case of an app-store-like feed service, the feed may reject pilets in case of missing fees. In such scenarios, the response should be `402`.

docs/testimonials.md

@@ -10,23 +10,23 @@ A collection of some statements from community members regarding Piral as a fram
 
 *Willian Alves*
 
-> Comparing all available options Piral is definitely the ultimate microfrontend framework.
+> Comparing all available options Piral is definitely the ultimate micro frontend framework.
 
 *Andreas Rossmann*
 
-> We are liking this. If we decide to go on microfrontend, for sure we gonna use Piral.
+> We are liking this. If we decide to go on micro frontend, for sure we gonna use Piral.
 
 *Palash Kapoor*
 
-> Smooth developer experience, best microfrontend framework on the market.
+> Smooth developer experience, best micro frontend framework on the market.
 
 *Boris Maric*
 
 > Your team and product is a winner and we will vouch for it any day.
 
 *Tarun Kumar Sukhu*
 
-> I really love the ideas behind the Piral micro-frontend framework.
+> I really love the ideas behind the Piral micro frontend framework.
 
 *Son Nguyen*
 
@@ -38,7 +38,7 @@ A collection of some statements from community members regarding Piral as a fram
 
 *Hans Frey*
 
-> Best solution for micro-frontends. Flexible, extensible, robust.
+> Best solution for micro frontends. Flexible, extensible, robust.
 
 *Sven Wiemann*
 

docs/tutorials/23.2-monorepo-rush.md

@@ -12,7 +12,7 @@ You might be wondering "what is this Rush"? Rush is a Node.js command line tool
 
 ## Rush Setup
 
-Before we get started, make sure you have the latest Rush release installed globally:
+Before we get started, make sure you have the latest Rush release installed globally (right now this is tested using version 5 of Rush, it might work with a different version, too):
 
 ```sh
 npm install -g @microsoft/rush

package.json

@@ -84,6 +84,7 @@
     "rc": "1.2.8",
     "rxjs": "7.5.6",
     "set-value": "4.0.1",
+    "socks": "2.7.3",
     "shell-quote": "1.7.3",
     "ssri": "8.0.1",
     "tar": "^6.2.0",

src/converters/piral-aurelia/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-blazor/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-blazor/src/events.ts

@@ -61,7 +61,9 @@ function findTarget(target: HTMLElement = document.body) {
 }
 
 function dispatchToRoot(event: any) {
-  isInternalNavigation(event) && performInternalNavigation(event);
+  if (isInternalNavigation(event)) {
+    performInternalNavigation(event);
+  }
 
   // the mutation event cannot be cloned (at least in Webkit-based browsers)
   if (!(event instanceof MutationEvent) && !event.processed) {

src/converters/piral-blazor/src/navigation.ts

@@ -20,10 +20,14 @@ function eventHasSpecialKey(event: MouseEvent) {
 export function isInternalNavigation(event: MouseEvent) {
   const anchorTarget = getAnchorTarget(event);
   return (
+    anchorTarget &&
     event.type === 'click' &&
     event.button === 0 &&
+    !event.defaultPrevented &&
     !eventHasSpecialKey(event) &&
-    anchorTarget?.hasAttribute('href') &&
+    anchorTarget.hasAttribute('href') &&
+    (!anchorTarget.target || anchorTarget.target !== '_self') &&
+    !anchorTarget.hasAttribute('download') &&
     isWithinBaseUriSpace(anchorTarget.href)
   );
 }

src/converters/piral-cycle/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-elm/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-ember/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-hyperapp/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-inferno/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-litel/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-million/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-mithril/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-ng/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-ng/README.md

@@ -363,6 +363,8 @@ Depending on your Angular needs you'd want to share more packages.
 
 Depending on the mounted component different services are injected. the following table lists the names of the injected services per component type.
 
+**Important**: These are all meant as constructor injectors. As injected services are always singletons in Angular you will *never* receive a changed value on them. Therefore, only use these values in the constructor and **don't** capture them. You might capture / store values *inside* the props (e.g., `props.params`), but don't capture the injected props. Instead, use `@Input` (see next section) if you need to continuously monitor the props.
+
 | Component | Props   | Piral   | Context   |
 |-----------|---------|---------|-----------|
 | Tile      | `Props` | `piral` | `Context` |
@@ -379,12 +381,15 @@ The following code snippet illustrates the injection of the `Props` service from
 @Component({
   template: `
     <div class="tile">
-      <p>{{ props.rows }} rows and {{ props.columns }} columns</p>
+      <p>{{ rows }} rows and {{ cols }} columns</p>
     </div>
   `,
 })
 export class SampleTileComponent {
-  constructor(@Inject('Props') public props: TileComponentProps<any>) {}
+  constructor(@Inject('Props') props: TileComponentProps<any>) {
+    this.rows = props.rows;
+    this.cols = props.columns;
+  }
 }
 ```
 

src/converters/piral-ng/core-dynamic.js

@@ -0,0 +1 @@
+import '@angular/compiler';

src/converters/piral-ng/extend-webpack.js

@@ -30,6 +30,7 @@ module.exports =
         esModule: false,
       },
     };
+    const jitMode = ngOptions.jitMode ?? true;
 
     function findRule(tester, changer) {
       config.module.rules.forEach((rule) => {
@@ -94,11 +95,29 @@ module.exports =
       },
     );
 
+    if (jitMode) {
+      // The job of this plugin is to make angular-core depend on angular-compiler - this way
+      // angular-compiler does not need to be loaded separately and angular-compiler is present
+      // *before* angular-core
+      // this is only required in jit mode - as otherwise everything should be pre-compiled
+      config.plugins.push({
+        apply(compiler) {
+          const { entry } = compiler.options;
+          const core = entry['angular-core'];
+
+          if (typeof core !== 'undefined') {
+            const compilerDependency = resolve(__dirname, 'core-dynamic.js');
+            core.import = [compilerDependency, ...core.import];
+          }
+        },
+      });
+    }
+
     config.plugins.push(
       new AngularWebpackPlugin({
         tsconfig: resolve(process.cwd(), 'tsconfig.json'),
-        jitMode: true,
         ...ngOptions,
+        jitMode,
         compilerOptions: {
           ...compilerOptions,
           compilationMode: 'partial',

src/converters/piral-ng/package.json

@@ -30,6 +30,9 @@
     "./convert": {
       "import": "./convert.js"
     },
+    "./core-dynamic": {
+      "import": "./core-dynamic.js"
+    },
     "./extend-webpack": {
       "require": "./extend-webpack.js"
     },
@@ -54,6 +57,7 @@
     "common.js",
     "convert.d.ts",
     "convert.js",
+    "core-dynamic.js",
     "extend-webpack.js"
   ],
   "repository": {

src/converters/piral-ng/src/module.ts

@@ -30,10 +30,16 @@ const availableModules: Array<ModuleDefinition> = [];
 function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) {
   const { module, components } = moduleDef;
   const imports = [BrowserModule, SharedModule, module];
-  const props = { current: undefined as BehaviorSubject<any> };
+  const props = { current: undefined };
+  const createProxy = () =>
+    new Proxy(props.current, {
+      get(_, name) {
+        return props.current[name];
+      },
+    });
   const providers = [
     RoutingService,
-    { provide: 'Props', useFactory: () => props.current.value, deps: [] },
+    { provide: 'Props', useFactory: createProxy, deps: [] },
     { provide: 'piral', useFactory: () => piral, deps: [] },
   ];
 
@@ -60,7 +66,7 @@ function instantiateModule(moduleDef: ModuleDefinition, piral: PiletApi) {
 
     attach(component: any, node: HTMLElement, $props: BehaviorSubject<any>) {
       const factory = this.resolver.resolveComponentFactory(component);
-      props.current = $props;
+      props.current = $props.value;
 
       if (factory) {
         const ref = this.zone.run(() => this.appRef.bootstrap<any>(factory, node));

src/converters/piral-ngjs/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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

src/converters/piral-preact/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2023 smapiot
+Copyright (c) 2019 - 2024 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