Cleanup

Templarian · Templarian · commit 1ced725e6323 · 2025-11-28T15:09:37.000-06:00
diff --git a/.npmrc b/.npmrc
@@ -1,2 +1,3 @@
 # Comment out during package upgrades
-loglevel=silent
+loglevel=silent
+node-options=--max-old-space-size=8192
diff --git a/README.md b/README.md
@@ -1,11 +1,11 @@
-# Material Design Icons - Website Components
+# Pictogrammers - Components
 
-> Note this repo is for the components used in the Material Design Icons apps. If you want components for your own project look here:
+> Note this repo is for the components used in various Pictogrammers apps. If you are looking for icon related components for your own project look here:
 >
 > - [React](https://github.com/Templarian/MaterialDesign-React/)
 > - [Web Component](https://github.com/Templarian/MaterialDesign-WebComponent/)
 
-The website is made of many components, view the `src/pg` folder to see the source.
+Components here are in various stages of development, view the `src/pg` folder to see the source.
 
 - [View the Components](https://pictogrammers.github.io/@pictogrammers/components/)
 
@@ -15,7 +15,6 @@ To run the demo application locally use the following NPM commands.
 
 ```bash
 npm install
-npm test
 npm start
 # npm start [pgButton|pg-button, ...]
 ```
@@ -38,7 +37,7 @@ npm run publish
 
 ### Web Components
 
-Web Components with a very basic wrapper. The only magic is...
+Web Components with a [very basic wrapper](https://github.com/Pictogrammers/Element/). The only magic is...
 
 - `@Prop() foo = 'Hello World`;
   - Calls `this.render()` on change.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "start": "element-start",
     "build": "element-build",
     "publish": "element-publish",
-    "publish2": "cross-env NODE_OPTIONS=--max_old_space_size=8192 mode=production webpack --config webpack.publish.config.js && node ./scripts/publish.js",
+    "publish2": "cross-env NODE_OPTIONS=--max_old_space_size=8192 mode=production webpack --config ./webpack.publish.config.js && node ./scripts/publish.js",
     "test": "jest --no-cache"
   },
   "repository": {
@@ -25,12 +25,13 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.66",
+    "@pictogrammers/element": "0.0.67",
     "@pictogrammers/element-jest": "^0.1.10",
-    "@pictogrammers/element-webpack": "^0.1.51",
+    "@pictogrammers/element-webpack": "^0.1.53",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "webpack-cli": "^6.0.1"
   }
 }
diff --git a/scripts/publish.js b/scripts/publish.js
@@ -11,7 +11,7 @@ import {
   copyFolderSync,
   copyFolderContentsSync,
   eachComponent
-} from './utils';
+} from './utils.js';
 import { execSync } from "child_process";
 
 // publish/
@@ -26,10 +26,10 @@ folder('publish');
 // Copy README.md to publish/README.md
 copyFileSync('README.md', 'publish/README.md');
 console.log(`Done: "README.md" copied to "publish/README.md`);
-copyFolderSync('dist', 'publish');
-removeFolder('publish/dist/api');
-remove('publish/dist/index.html');
-remove('publish/dist/main.js.LICENSE.txt');
+//copyFolderSync('dist', 'publish');
+//removeFolder('publish/dist/api');
+//remove('publish/dist/index.html');
+//remove('publish/dist/main.js.LICENSE.txt');
 // Write publish/package.json
 const pkg = JSON.parse(read('package.json'));
 delete pkg.private;
@@ -57,6 +57,8 @@ eachComponent('publish', ({ cls, namespace, component }) => {
   }
 });
 console.log(`Done: injecting "index.ts" into each component`);
-// Cleanup
+// Overwrite index.html
+copyFileSync('dist/index.html', 'publish/index.html');
+copyFileSync('dist/main.js', 'publish/main.js');
 // Final Message
 console.log(`Done! Please run "cd publish" and "npm publish".`);
diff --git a/scripts/utils.js b/scripts/utils.js
@@ -141,8 +141,8 @@ export function eachComponent(srcDir, callback) {
  */
 export function getComponents(srcDir) {
   const srcDir2 = srcDir
-    ? path.join(__dirname, '..', srcDir)
-    : path.join(__dirname, '..');
+    ? path.join(import.meta.dirname, '..', srcDir)
+    : path.join(import.meta.dirname, '..');
   console.log(srcDir2);
   const components = [];
   const namespaces = fs.readdirSync(srcDir2)
diff --git a/src/pg/database/__examples__/basic/basic.html b/src/pg/database/__examples__/basic/basic.html
@@ -1,5 +1,6 @@
 <div class="example">
-  <pg-database part="database"></pg-database>
+  <!-- disable for now -->
+  <!--<pg-database part="database"></pg-database>-->
   <div>
     Total Icons: <code part="count"></code>
   </div>
diff --git a/src/pg/database/__examples__/basic/basic.ts b/src/pg/database/__examples__/basic/basic.ts
@@ -12,16 +12,16 @@ export default class XPgDatabaseBasic extends HTMLElement {
 
   @Prop() fontId = 'D051337E-BC7E-11E5-A4E9-842B2B6CFE1B';
 
-  @Part() $database: PgDatabase;
+  //@Part() $database: PgDatabase;
 
   @Part() $count: HTMLSpanElement;
   @Part() $total: HTMLSpanElement;
 
   icons: Icon[] = [];
 
   connectedCallback() {
-    this.$database.addEventListener('sync', this.handleSync.bind(this));
-    this.$database.font = this.fontId;
+    //this.$database.addEventListener('sync', this.handleSync.bind(this));
+    //this.$database.font = this.fontId;
   }
 
   async handleSync(e: CustomEvent) {
diff --git a/src/pg/grid/__examples__/basic/basic.html b/src/pg/grid/__examples__/basic/basic.html
@@ -22,8 +22,8 @@
   </label>
 </p>
 <div class="example">
-  <pg-database part="database"></pg-database>
+  <!--<pg-database part="database"></pg-database>
   <pg-grid part="grid">
     <p>No Icons Found! default slot content</p>
-  </pg-grid>
+  </pg-grid>-->
 </div>
diff --git a/src/pg/grid/__examples__/basic/basic.ts b/src/pg/grid/__examples__/basic/basic.ts
@@ -11,7 +11,7 @@ import template from './basic.html';
   template
 })
 export default class XPgGridBasic extends HTMLElement {
-
+/*
   @Prop() fontId = 'D051337E-BC7E-11E5-A4E9-842B2B6CFE1B';
 
   @Part() $button0: HTMLButtonElement;
diff --git a/src/pg/inputPixelEditor/inputPixelEditor.css b/src/pg/inputPixelEditor/inputPixelEditor.css
@@ -8,7 +8,7 @@
   outline: 0;
 }
 
-[part="wrapper"]:focus::before {
+[part="wrapper"]:focus-visible::before {
   pointer-events: none;
   content: '';
   position: absolute;
diff --git a/src/pg/markdown/README.md b/src/pg/markdown/README.md
@@ -8,6 +8,20 @@ import '@pictogrammers/components/pg/markdown';
 
 ## Usage
 
-| Events | Description |
-| ------ | ----------- |
-| `onchange` | `event = { detail: { r, g, b, hex } }` |
+All markdown formatting is supported. Code blocks support:
+
+- css
+- groovy
+- javascript
+- json
+- jsx
+- tsx
+- java
+- markup (aka html, xml)
+- typescript
+- sass
+- scss
+- yaml (with a custom viewer)
+- php
+- bash
+- markdown
diff --git a/src/pg/markdown/__examples__/basic/constants.ts b/src/pg/markdown/__examples__/basic/constants.ts
@@ -125,5 +125,5 @@ export const example = [
   '| Row 3                | Row 3    |',
   '| Row 4                | Row 4    |',
   '',
-  'Done, but `code` blocks would be useful.'
+  'End of document, and `code` blocks also work.'
 ].join('\n');
diff --git a/webpack.publish.config.js b/webpack.publish.config.js
@@ -1,8 +1,57 @@
+import config from '@pictogrammers/element-webpack';
+
+import createIndex from './scripts/createIndex.js';
+
+const bold = (text) => '\x1b[1m' + text + '\x1b[0m';
+const green = (text) => '\x1b[32m' + text + '\x1b[0m';
+const red = (text) => '\x1b[31m' + text + '\x1b[0m';
+
+export default config({
+  dist: 'publish',
+  mode: 'production',
+  index: (components, args, mode) => {
+    return createIndex(components, mode);
+  },
+  watch: [],
+  copy: [
+    { from: "src/theme-ui3.css", to: `theme-ui3.css` }
+  ],
+  before: (components, args, mode) => {
+    // Components + GreenText(# of Components)
+    console.log('Components', bold(green(components.length)));
+    const filteredComponents = args;
+    if (filteredComponents.length) {
+      let exists = [], invalid = [];
+      components.forEach(({ name }) => {
+        if (filteredComponents.includes(name)) {
+          exists.push(name);
+        } else {
+          invalid.push(name);
+        }
+      });
+      console.log(' +', ...(exists.map(name => green(name))));
+      console.log(' -', ...(invalid.map(name => red(name))));
+      // Remove invalid components
+      for(let i = components.length - 1; i >= 0; i--) {
+        if (invalid.includes(components[i].name)) {
+          components.splice(i, 1);
+        }
+      }
+    }
+  },
+  after: (components, args, mode) => {
+    // Nothing
+  }
+});
+
+
+/*
 import path from 'path';
 import {
   dashToCamel,
-  getComponents
-} from './scripts/utils';
+  getComponents,
+  write
+} from './scripts/utils.js';
 import createIndex from './scripts/createIndex.js';
 
 const DIST_DIR = 'dist';
@@ -17,10 +66,12 @@ components.forEach(({ input, examples }) => {
     inputs.push(exampleInput);
   });
 });
-
+//write(`publish/index.html`, createIndex(components, mode));
 export default (env, argv) => {
   const entries = [];
-  const mode = argv.mode === 'production' ? 'production' : 'development';
+  //const mode = argv.mode === 'production' ? 'production' : 'development';
+  const mode = 'production';
+  console.log('mode >>>', argv);
   function addEntries(input, name) {
     entries.push({
       mode: mode,
@@ -43,7 +94,7 @@ export default (env, argv) => {
       },
       output: {
         filename: `${name}.js`,
-        path: path.resolve(__dirname, DIST_DIR),
+        path: path.resolve(import.meta.dirname, DIST_DIR),
       },
       performance: {
         hints: false
@@ -58,4 +109,4 @@ export default (env, argv) => {
   // Output Basic Runtime
   console.log(`Stats: ${components.length - 1} Components`);
   return entries;
-};
+}; */
