p-elements-core 1.2.30 → 1.2.32-rc-10

package/docs/src/scripts/components/app-playground/app-playground.tsx

@@ -1,190 +1,190 @@
-@CustomElementConfig({
-  tagName: "app-playground",
-})
-export class AppPlaygroundElement extends CustomElement {
-
-  static style = `
-  :host{
-    display: block;
-    height: 100%;
-  }
-  .app-playground{
-    height: 100%;
-  }
-  .app-playground-split-panel{
-    height: 100%;
-  }
-  playground-preview{
-    height: 100%;
-    position: unset;
-  }
-  .app-playground-editor-container{
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-    .app-playground-editor{
-      height: 100%;
-      flex: 1;
-    }
-  `;
-
-  constructor() {
-    super();
-    if (!this.id) {
-      this.id = "app-playground-" + Math.floor(Math.random() * 1000);
-    }
-  }
-
-  #initDone = false;
-
-  static readonly projectorMode = "replace";
-
-  #_playgroundLoaded = false;
-
-  get #playgroundLoaded() {
-    return this.#_playgroundLoaded;
-  }
-
-  set #playgroundLoaded(value: boolean) {
-    this.#_playgroundLoaded = value;
-    this.scheduleRender();
-  }
-
-  @Property({ type: "string", attribute: "playground-src", reflect: true })
-  playgroundSrc: string = null;
-
-  @Property({ type: "string", attribute: "project-src", reflect: true })
-  projectSrc: string = null;
-
-  @Property({ type: "object" })
-  files: any = null;
-
-  @Property({ type: "string", attribute: "cdn-base-url", reflect: true })
-  cdnBaseUrl: string = null;
-
-  updated(propertyName: string, oldValue: any, newValue: any): void {
-    if (propertyName === "projectSrc" && newValue) {
-      this.#loadProject(newValue);
-    }
-  }
-
-  async #loadProject(projectSrc: string) {
-    const response = await fetch(projectSrc).catch((e) => e);
-    if (response instanceof Error || !response.ok) {
-      console.error("Failed to load project:", response);
-      return;
-    }
-    const data = await response.json();
-    if (!data) {
-      console.error("Failed to load project: no data");
-      return;
-    }
-    const configuredFiles: string[] = [];
-    for (const key in data.files) {
-      configuredFiles.push(key);
-    }
-    const url = new URL(projectSrc, window.location.href);
-    const projectPath = url.pathname.substring(
-      0,
-      url.pathname.lastIndexOf("/") + 1
-    );
-    const fileResponses = await Promise.all(
-      configuredFiles.map((file: string) => {
-        const filePath = projectPath + file;
-        return fetch(filePath)
-          .then((response) =>
-            response.ok
-              ? response.text()
-              : Promise.reject(Error(response.statusText))
-          )
-          .catch((e) => e);
-      })
-    );
-    const files: any = [];
-    fileResponses.forEach((fileResponse: string | Error, index) => {
-      if (!(fileResponse instanceof Error)) {
-        const file = configuredFiles[index];
-        files.push({
-          name: file,
-          content: fileResponse,
-        });
-      }
-    });
-    this.files = files;
-  }
-
-  #afterCreate = (e: HTMLDivElement) => {
-    const esm = this.playgroundSrc;
-    if (!esm) return;
-    import(esm)
-      .then(() => {
-        this.#playgroundLoaded = true;
-      })
-      .catch((error) => {
-        console.error("Failed to load module:", error);
-      });
-  };
-
-  #getType = (file: string) => {
-    if (file.endsWith(".html")) {
-      return "sample/html";
-    } else if (file.endsWith(".tsx") || file.endsWith(".ts")) {
-      return "sample/ts";
-    }
-    return "sample/unknown";
-  };
-
-  render = () => {
-    return (
-      <div afterCreate={this.#afterCreate} class="app-playground">
-        
-        <app-split-panel class="app-playground-split-panel">
-          {this.#playgroundLoaded && (
-            [
-              <playground-project
-              class="app-playground-project"
-              cdn-base-url={
-                this.cdnBaseUrl ? this.cdnBaseUrl : "https://cdn.jsdelivr.net/npm"
-              }
-              id={"project" + this.id}
-            >
-              {this.files?.map((file: any) => {
-                return (
-                  <script
-                    key={file.name}
-                    type={this.#getType(file.name)}
-                    filename={file.name}
-                    innerHTML={file.content}
-                  ></script>
-                );
-              })}
-            </playground-project>,<playground-preview
-              slot="primary"
-              class="app-playground-preview"
-              project={"project" + this.id}
-            ></playground-preview>]
-          )}
-            <div slot="secondary" class="app-playground-editor-container"> 
-            {this.#playgroundLoaded && (
-              <playground-tab-bar
-                class="app-playground-tab-bar"
-                id={"tab-bar" + this.id}
-                project={"project" + this.id}
-                editor={"editor" + this.id}
-              ></playground-tab-bar>
-            )}
-            {this.#playgroundLoaded && (
-              <playground-file-editor 
-                class="app-playground-editor"
-                id={"editor" + this.id}
-                project={"project" + this.id}
-              ></playground-file-editor>
-            )}
-            </div>
-          
-        </app-split-panel>
-      </div>
-    );
-  };
+@CustomElementConfig({
+  tagName: "app-playground",
+})
+export class AppPlaygroundElement extends CustomElement {
+
+  static style = `
+  :host{
+    display: block;
+    height: 100%;
+  }
+  .app-playground{
+    height: 100%;
+  }
+  .app-playground-split-panel{
+    height: 100%;
+  }
+  playground-preview{
+    height: 100%;
+    position: unset;
+  }
+  .app-playground-editor-container{
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+    .app-playground-editor{
+      height: 100%;
+      flex: 1;
+    }
+  `;
+
+  constructor() {
+    super();
+    if (!this.id) {
+      this.id = "app-playground-" + Math.floor(Math.random() * 1000);
+    }
+  }
+
+  #initDone = false;
+
+  static readonly projectorMode = "replace";
+
+  #_playgroundLoaded = false;
+
+  get #playgroundLoaded() {
+    return this.#_playgroundLoaded;
+  }
+
+  set #playgroundLoaded(value: boolean) {
+    this.#_playgroundLoaded = value;
+    this.scheduleRender();
+  }
+
+  @Property({ type: "string", attribute: "playground-src", reflect: true })
+  playgroundSrc: string = null;
+
+  @Property({ type: "string", attribute: "project-src", reflect: true })
+  projectSrc: string = null;
+
+  @Property({ type: "object" })
+  files: any = null;
+
+  @Property({ type: "string", attribute: "cdn-base-url", reflect: true })
+  cdnBaseUrl: string = null;
+
+  updated(propertyName: string, oldValue: any, newValue: any): void {
+    if (propertyName === "projectSrc" && newValue) {
+      this.#loadProject(newValue);
+    }
+  }
+
+  async #loadProject(projectSrc: string) {
+    const response = await fetch(projectSrc).catch((e) => e);
+    if (response instanceof Error || !response.ok) {
+      console.error("Failed to load project:", response);
+      return;
+    }
+    const data = await response.json();
+    if (!data) {
+      console.error("Failed to load project: no data");
+      return;
+    }
+    const configuredFiles: string[] = [];
+    for (const key in data.files) {
+      configuredFiles.push(key);
+    }
+    const url = new URL(projectSrc, window.location.href);
+    const projectPath = url.pathname.substring(
+      0,
+      url.pathname.lastIndexOf("/") + 1
+    );
+    const fileResponses = await Promise.all(
+      configuredFiles.map((file: string) => {
+        const filePath = projectPath + file;
+        return fetch(filePath)
+          .then((response) =>
+            response.ok
+              ? response.text()
+              : Promise.reject(Error(response.statusText))
+          )
+          .catch((e) => e);
+      })
+    );
+    const files: any = [];
+    fileResponses.forEach((fileResponse: string | Error, index) => {
+      if (!(fileResponse instanceof Error)) {
+        const file = configuredFiles[index];
+        files.push({
+          name: file,
+          content: fileResponse,
+        });
+      }
+    });
+    this.files = files;
+  }
+
+  #afterCreate = (e: HTMLDivElement) => {
+    const esm = this.playgroundSrc;
+    if (!esm) return;
+    import(esm)
+      .then(() => {
+        this.#playgroundLoaded = true;
+      })
+      .catch((error) => {
+        console.error("Failed to load module:", error);
+      });
+  };
+
+  #getType = (file: string) => {
+    if (file.endsWith(".html")) {
+      return "sample/html";
+    } else if (file.endsWith(".tsx") || file.endsWith(".ts")) {
+      return "sample/ts";
+    }
+    return "sample/unknown";
+  };
+
+  render = () => {
+    return (
+      <div afterCreate={this.#afterCreate} class="app-playground">
+        
+        <app-split-panel class="app-playground-split-panel">
+          {this.#playgroundLoaded && (
+            [
+              <playground-project
+              class="app-playground-project"
+              cdn-base-url={
+                this.cdnBaseUrl ? this.cdnBaseUrl : "https://cdn.jsdelivr.net/npm"
+              }
+              id={"project" + this.id}
+            >
+              {this.files?.map((file: any) => {
+                return (
+                  <script
+                    key={file.name}
+                    type={this.#getType(file.name)}
+                    filename={file.name}
+                    innerHTML={file.content}
+                  ></script>
+                );
+              })}
+            </playground-project>,<playground-preview
+              slot="primary"
+              class="app-playground-preview"
+              project={"project" + this.id}
+            ></playground-preview>]
+          )}
+            <div slot="secondary" class="app-playground-editor-container"> 
+            {this.#playgroundLoaded && (
+              <playground-tab-bar
+                class="app-playground-tab-bar"
+                id={"tab-bar" + this.id}
+                project={"project" + this.id}
+                editor={"editor" + this.id}
+              ></playground-tab-bar>
+            )}
+            {this.#playgroundLoaded && (
+              <playground-file-editor 
+                class="app-playground-editor"
+                id={"editor" + this.id}
+                project={"project" + this.id}
+              ></playground-file-editor>
+            )}
+            </div>
+          
+        </app-split-panel>
+      </div>
+    );
+  };
 }

package/docs/tsconfig.json

@@ -1,22 +1,22 @@
-{
-  "compilerOptions": {
-    "experimentalDecorators": true,
-    "target": "ES6",
-    "useDefineForClassFields": false,
-    "module": "ES2020",
-    "lib": ["ES2020", "DOM", "dom.iterable"],
-    "jsx": "react",
-    "jsxFactory": "Maquette.h",
-    "moduleResolution": "Node",
-    "strict": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "esModuleInterop": true,
-    "noUnusedLocals": false,
-    "noUnusedParameters": false,
-    "noImplicitReturns": true,
-    "skipLibCheck": true,
-    "strictNullChecks": false
-  },
-  "include": ["src"]
-}
+{
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "target": "ES6",
+    "useDefineForClassFields": false,
+    "module": "ES2020",
+    "lib": ["ES2020", "DOM", "dom.iterable"],
+    "jsx": "react",
+    "jsxFactory": "Maquette.h",
+    "moduleResolution": "Node",
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noImplicitReturns": true,
+    "skipLibCheck": true,
+    "strictNullChecks": false
+  },
+  "include": ["src"]
+}

package/index.html

@@ -10,8 +10,21 @@
     </head>
     <body>
 
+    <bring-your-own-projector></bring-your-own-projector>
 
-    <h1>Sample custom element 1</h1>
+    <hr />
+
+    <bring-your-own-projector-in-shadow-root></bring-your-own-projector-in-shadow-root>
+
+    <hr />
+
+    <render-on-set></render-on-set>
+
+    <hr />
+
+    <p-bugs-03></p-bugs-03>
+
+    <hr />
 
     <p-foo id="X1" name="Fred" age="64"></p-foo>
 
@@ -41,6 +54,6 @@
     <script type="module" src="dist/p-elements-core-modern.js"></script>
     <script type="module" src="demo/sample.js"></script>
 
-    
+
     </body>
 </html>

package/p-elements-core.d.ts

@@ -1,11 +1,10 @@
 /// <reference types="underscore" />
 /// <reference types="@types/animejs" />
 
-export  namespace JSX {
+declare namespace JSX {
   interface IntrinsicElements {
     [tagName: string]: VNodeProperties;
   }
-  type Element = VNode;
 }
 
 declare interface IElementConfig {
@@ -293,7 +292,17 @@ interface AttributeConverter<T> {
   fromAttribute?(value: string | null): T;
   toAttribute?(value: T): string;
 }
-declare type PropertyType = "string" | "number" | "boolean" | "object";
+declare type PropertyType = "string" 
+  | "number" 
+  | "boolean" 
+  | "object" 
+  | "array" 
+  | StringConstructor
+  | NumberConstructor
+  | BooleanConstructor
+  | ObjectConstructor
+  | ArrayConstructor;
+
 
 declare const Property: (options?: {
   attribute?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "p-elements-core",
-  "version": "1.2.30",
+  "version": "1.2.32-rc-10",
   "description": "P Elements Core V1",
   "main": "dist/p-elements-core.js",
   "types": "p-elements-core.d.ts",
@@ -9,7 +9,10 @@
     "url": "gitlab.com:p-elements/p-element-core.git"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "vitest --run",
+    "test:watch": "vitest --ui",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage --run",
     "dev-docs": "rimraf ./docs/public && cd docs && npm run dev",
     "clean": "rimraf ./dist",
     "build-old": "webpack --config older-browsers-webpack.config.js --mode=production",
@@ -24,6 +27,9 @@
     "@babel/preset-react": "=7.24.7",
     "@types/animejs": "^3.1.12",
     "@types/underscore": "^1.11.15",
+    "@vitest/browser-playwright": "^4.0.0",
+    "@vitest/coverage-v8": "^4.0.0",
+    "@vitest/ui": "^4.0.0",
     "@webreflection/custom-elements-builtin": "^0.4.1",
     "animejs": "=2.2.0",
     "babel-loader": "^8.2.3",
@@ -34,8 +40,9 @@
     "terser-webpack-plugin": "^5.3.0",
     "ts-loader": "^9.2.6",
     "typescript": "^5.4.3",
-    "underscore": "=1.13.1",
-    "webpack": "=5.65.0",
+    "underscore": "=1.13.8",
+    "vitest": "^4.0.0",
+    "webpack": "^5.105.0",
     "webpack-cli": "=4.9.1"
   }
 }