Prepare for next release

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Piral Changelog
 
+## 1.8.0 (tbd)
+
+- Added configuration for internal styles (#731)
+
 ## 1.7.3 (December 11, 2024)
 
 - Fixed `pilet upgrade` command with `npm` client not changing *package.json*

docs/static/schemas/piral-v0.json

@@ -83,6 +83,15 @@
       ],
       "description": "Defines what isolation / component wrapper is used for components of micro frontends. By default, the 'classic' isolation mode is used."
     },
+    "internalStyles": {
+      "type": "string",
+      "enum": [
+        "inline",
+        "sheet",
+        "none"
+      ],
+      "description": "Defines how the styles for the web components are transported. 'inline' puts them on the web components when rendering, 'sheet' includes a stylesheet when bundling, 'none' requires you to include them somewhere. By default, 'inline' is used."
+    },
     "shared": {
       "type": "array",
       "items": {

src/framework/piral-core/app.codegen

@@ -24,9 +24,11 @@ module.exports = function () {
     debug: debug && (cfg.debugSettings || {}),
     emulator: !!process.env.DEBUG_PILET,
     shared: Array.isArray(cfg.shared) ? cfg.shared : [],
+    internalStyles: cfg.internalStyles || 'inline',
     isolation: cfg.isolation || 'classic',
   };
 
+  cg.createBasicAppFunc(imports, exports, opts);
   cg.createDependencies(imports, exports, opts);
   cg.createDefaultState(imports, exports, opts);
   cg.createDebugHandler(imports, exports, opts);

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

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

src/framework/piral-core/package.json

@@ -39,7 +39,8 @@
     "lib",
     "src",
     "app.codegen",
-    "app.codegen.d.ts"
+    "app.codegen.d.ts",
+    "style.css"
   ],
   "funding": {
     "type": "github",

src/framework/piral-core/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');
     }
 

src/framework/piral-core/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(`

src/framework/piral-core/style.css

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

src/plugins/piral-fetch/package.json

@@ -53,7 +53,7 @@
     "@types/cors": "^2.8.6",
     "@types/express": "^4.17.21",
     "cors": "^2.8.5",
-    "express": "^4.20.0",
+    "express": "^4.21.2",
     "piral-core": "^1.7.3",
     "whatwg-fetch": "^3.0.0"
   }

src/tooling/piral-cli-webpack5/package.json

@@ -61,7 +61,7 @@
     "cheerio": "^1.0.0",
     "css-loader": "^6.11.0",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "express": "^4.20.0",
+    "express": "^4.21.2",
     "html-entities": "^1.2.0",
     "html-webpack-plugin": "^5.6.0",
     "loader-utils": "^2.0.4",

yarn.lock

@@ -4751,7 +4751,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
-cookie@0.6.0, [email protected].0:
+cookie@0.7.0, [email protected].1:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.7.0.tgz#2148f68a77245d5c2c0005d264bc3e08cfa0655d"
   integrity sha512-qCf+V4dtlNhSRXGAZatc1TasyFO6GjohcOul807YOb5ik3+kQSnb4d7iajeCL8QHaJ4uZEjCgiCJerKXwdRVlQ==
@@ -5897,37 +5897,37 @@ exponential-backoff@^3.1.1:
   resolved "https://registry.yarnpkg.com/exponential-backoff/-/exponential-backoff-3.1.1.tgz#64ac7526fe341ab18a39016cd22c787d01e00bf6"
   integrity sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==
 
-express@^4.20.0:
-  version "4.20.0"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.20.0.tgz#f1d08e591fcec770c07be4767af8eb9bcfd67c48"
-  integrity sha512-pLdae7I6QqShF5PnNTCVn4hI91Dx0Grkn2+IAsMTgMIKuQVte2dN9PeGSSAME2FR8anOhVA62QDIUaWVfEXVLw==
+express@^4.21.2:
+  version "4.21.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.21.2.tgz#cf250e48362174ead6cea4a566abef0162c1ec32"
+  integrity sha512-28HqgMZAmih1Czt9ny7qr6ek2qddF4FclbMzwhCREB6OFfH+rXAnuNCwo1/wFvrtbgsQDb4kSbX9de9lFbrXnA==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
     body-parser "1.20.3"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.6.0"
+    cookie "0.7.1"
     cookie-signature "1.0.6"
     debug "2.6.9"
     depd "2.0.0"
     encodeurl "~2.0.0"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "1.2.0"
+    finalhandler "1.3.1"
     fresh "0.5.2"
     http-errors "2.0.0"
     merge-descriptors "1.0.3"
     methods "~1.1.2"
     on-finished "2.4.1"
     parseurl "~1.3.3"
-    path-to-regexp "0.1.10"
+    path-to-regexp "0.1.12"
     proxy-addr "~2.0.7"
-    qs "6.11.0"
+    qs "6.13.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
     send "0.19.0"
-    serve-static "1.16.0"
+    serve-static "1.16.2"
     setprototypeof "1.2.0"
     statuses "2.0.1"
     type-is "~1.6.18"
@@ -6037,13 +6037,13 @@ fill-range@^7.1.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
-  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
+finalhandler@1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.3.1.tgz#0c575f1d1d324ddd1da35ad7ece3df7d19088019"
+  integrity sha512-6BN9trH7bp3qvnrRyzsBz+g3lZxTNZTbVO2EV1CS0WIcDbawYVdYvGflME/9QP0h0pYlCDBCTjYa9nZzMDpyxQ==
   dependencies:
     debug "2.6.9"
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     on-finished "2.4.1"
     parseurl "~1.3.3"
@@ -9319,10 +9319,10 @@ path-scurry@^1.11.1:
     lru-cache "^10.2.0"
     minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
 
-[email protected].10:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.10.tgz#67e9108c5c0551b9e5326064387de4763c4d5f8b"
-  integrity sha512-7lf7qcQidTku0Gu3YDPc8DJ1q7OOucfa/BSsIwjuh56VU7katFvuM8hULfkwB3Fns/rsVF7PwPKVw1sl5KQS9w==
+[email protected].12:
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.12.tgz#d5e1a12e478a976d432ef3c58d534b9923164bb7"
+  integrity sha512-RA1GjUVMnvYFxuqovrEqZoxxW5NUZqbwKtYz/Tt7nXerk0LbLblQmrsgdeOxV5SFHf0UDggjS/bSeOZwt1pmEQ==
 
 path-to-regexp@^1.7.0:
   version "1.8.0"
@@ -9951,13 +9951,6 @@ punycode@^2.1.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
-[email protected]:
-  version "6.11.0"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
-  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
-  dependencies:
-    side-channel "^1.0.4"
-
 [email protected]:
   version "6.13.0"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.13.0.tgz#6ca3bd58439f7e245655798997787b0d88a51906"
@@ -10690,25 +10683,6 @@ semver@^7.5.3, semver@^7.5.4:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.3.tgz#980f7b5550bc175fb4dc09403085627f9eb33143"
   integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
 
-[email protected]:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
-  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
-  dependencies:
-    debug "2.6.9"
-    depd "2.0.0"
-    destroy "1.2.0"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "2.0.0"
-    mime "1.6.0"
-    ms "2.1.3"
-    on-finished "2.4.1"
-    range-parser "~1.2.1"
-    statuses "2.0.1"
-
 [email protected]:
   version "0.19.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.19.0.tgz#bbc5a388c8ea6c048967049dbeac0e4a3f09d7f8"
@@ -10747,15 +10721,15 @@ seroval@^0.11.6:
   resolved "https://registry.yarnpkg.com/seroval/-/seroval-0.11.6.tgz#ec5ef38a7ac34cac116f6028d505c163c3767973"
   integrity sha512-Lhy+94CNcNza6d0vM4sQKLsaLaX39q0ELqIBc7DkdiFljI8Q387Yb+xKgLxRWXs7uuHRu/ZcJ64xfVJ0Bj4LPg==
 
-[email protected].0:
-  version "1.16.0"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.0.tgz#2bf4ed49f8af311b519c46f272bf6ac3baf38a92"
-  integrity sha512-pDLK8zwl2eKaYrs8mrPZBJua4hMplRWJ1tIFksVC3FtBEBnl8dxgeHtsaMS8DhS9i4fLObaon6ABoc4/hQGdPA==
+[email protected].2:
+  version "1.16.2"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.16.2.tgz#b6a5343da47f6bdd2673848bf45754941e803296"
+  integrity sha512-VqpjJZKadQB/PEbEwvFdO43Ax5dFBZ2UECszz8bQ7pi7wt//PWe1P6MN7eCnjsatYtBT6EuiClbjSWP2WrIoTw==
   dependencies:
-    encodeurl "~1.0.2"
+    encodeurl "~2.0.0"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.18.0"
+    send "0.19.0"
 
 set-blocking@^2.0.0:
   version "2.0.0"