Bug fixes for ES6, bump versions.

package.json

@@ -1,14 +1,15 @@
 {
   "private": true,
   "name": "@pictogrammers/components",
+  "type": "module",
   "version": "0.3.3",
   "license": "MIT",
   "author": "Austin Andrews",
   "scripts": {
     "start": "element-start",
     "build": "element-build",
     "publish": "element-publish",
-    "publish2": "cross-env NODE_OPTIONS=--max_old_space_size=8192 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 +26,12 @@
     "remarkable": "^2.0.1"
   },
   "devDependencies": {
-    "@pictogrammers/element": "0.0.27",
-    "@pictogrammers/element-jest": "^0.1.4",
-    "@pictogrammers/element-webpack": "^0.1.24",
+    "@pictogrammers/element": "0.0.40",
+    "@pictogrammers/element-jest": "^0.1.7",
+    "@pictogrammers/element-webpack": "^0.1.40",
     "cross-env": "^7.0.3",
     "npm-run-all": "^4.1.5",
     "raw-loader": "^4.0.2",
-    "typescript": "^4.6.4"
+    "typescript": "^5.3.2"
   }
 }

scripts/createIndex.js

@@ -1,4 +1,4 @@
-const {
+import {
   read,
   write,
   exists,
@@ -11,7 +11,7 @@ const {
   eachComponent,
   dashToCamel,
   camelToDash
-} = require('./utils');
+} from './utils.js';
 
 // Generate a demo page from index.html
 
@@ -21,7 +21,7 @@ const mdiGithub = 'M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22
 const mdiLink = 'M10.59,13.41C11,13.8 11,14.44 10.59,14.83C10.2,15.22 9.56,15.22 9.17,14.83C7.22,12.88 7.22,9.71 9.17,7.76V7.76L12.71,4.22C14.66,2.27 17.83,2.27 19.78,4.22C21.73,6.17 21.73,9.34 19.78,11.29L18.29,12.78C18.3,11.96 18.17,11.14 17.89,10.36L18.36,9.88C19.54,8.71 19.54,6.81 18.36,5.64C17.19,4.46 15.29,4.46 14.12,5.64L10.59,9.17C9.41,10.34 9.41,12.24 10.59,13.41M13.41,9.17C13.8,8.78 14.44,8.78 14.83,9.17C16.78,11.12 16.78,14.29 14.83,16.24V16.24L11.29,19.78C9.34,21.73 6.17,21.73 4.22,19.78C2.27,17.83 2.27,14.66 4.22,12.71L5.71,11.22C5.7,12.04 5.83,12.86 6.11,13.65L5.64,14.12C4.46,15.29 4.46,17.19 5.64,18.36C6.81,19.54 8.71,19.54 9.88,18.36L13.41,14.83C14.59,13.66 14.59,11.76 13.41,10.59C13,10.2 13,9.56 13.41,9.17Z';
 const mdiFile = 'M6,2A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18A2,2 0 0,0 20,20V8L14,2H6M6,4H13V9H18V20H6V4M8,12V14H16V12H8M8,16V18H13V16H8Z';
 
-exports.createIndex = function(components, mode) {
+export default function(components, mode) {
   let index = read('./src/index.html');
 
   const contentHtml = [];

scripts/publish.js

@@ -1,6 +1,6 @@
 // This script is super ugly
 
-const {
+import {
   read,
   write,
   exists,
@@ -11,8 +11,8 @@ const {
   copyFolderSync,
   copyFolderContentsSync,
   eachComponent
-} = require('./utils');
-const { execSync } = require("child_process");
+} from './utils';
+import { execSync } from "child_process";
 
 // publish/
 // - dist/
@@ -31,19 +31,19 @@ removeFolder('publish/dist/api');
 remove('publish/dist/index.html');
 remove('publish/dist/main.js.LICENSE.txt');
 // Write publish/package.json
-const package = JSON.parse(read('package.json'));
-delete package.private;
-delete package.devDependencies;
-delete package.scripts.publish;
+const pkg = JSON.parse(read('package.json'));
+delete pkg.private;
+delete pkg.devDependencies;
+delete pkg.scripts.publish;
 /*
 // Already running `npm version patch`
 package.version = package.version.replace(/(\d+)$/g, (m, minor) => {
   const next = parseInt(minor, 10) + 1;
   return `${next}`;
 });
 */
-write('publish/package.json', JSON.stringify(package, null, 4));
-console.log(`Done: "package.json" with version "${package.version}"`);
+write('publish/package.json', JSON.stringify(pkg, null, 4));
+console.log(`Done: "package.json" with version "${pkg.version}"`);
 // Copy src/* to publish/*
 copyFolderContentsSync('src', 'publish');
 // Inject index.ts into every component

scripts/utils.js

@@ -1,23 +1,23 @@
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
 
-exports.write = (file, data) => {
+export function write(file, data) {
   fs.writeFileSync(file, data);
-};
+}
 
-exports.read = (file) => {
+export function read(file) {
   return fs.readFileSync(file, 'utf8');
-};
+}
 
-exports.exists = (file) => {
+export function exists(file) {
   return fs.existsSync(file);
-};
+}
 
-exports.remove = (file) => {
+export function remove(file) {
   return fs.unlinkSync(file);
-};
+}
 
-function removeFolder(p) {
+export function removeFolder(p) {
   if (fs.existsSync(p)) {
     fs.readdirSync(p).forEach((file) => {
       const curPath = path.join(p, file);
@@ -31,15 +31,13 @@ function removeFolder(p) {
   }
 }
 
-exports.removeFolder = removeFolder;
-
-exports.folder = (targetFolder) => {
+export function folder (targetFolder) {
   if (!fs.existsSync(targetFolder)) {
     fs.mkdirSync(targetFolder);
   }
-};
+}
 
-function copyFileSync(source, target) {
+export function copyFileSync(source, target) {
 
   var targetFile = target;
 
@@ -51,11 +49,9 @@ function copyFileSync(source, target) {
   }
 
   fs.writeFileSync(targetFile, fs.readFileSync(source));
-};
-
-exports.copyFileSync = copyFileSync;
+}
 
-function copyFolderSync(source, target) {
+export function copyFolderSync(source, target) {
   var files = [];
 
   //check if folder needs to be created or integrated
@@ -76,11 +72,9 @@ function copyFolderSync(source, target) {
       }
     });
   }
-};
-
-exports.copyFolderSync = copyFolderSync;
+}
 
-function copyFolderContentsSync(source, target) {
+export function copyFolderContentsSync(source, target) {
   var files = [];
 
   //check if folder needs to be created or integrated
@@ -101,11 +95,9 @@ function copyFolderContentsSync(source, target) {
       }
     });
   }
-};
-
-exports.copyFolderContentsSync = copyFolderContentsSync;
+}
 
-exports.eachComponent = (srcDir, callback) => {
+export function eachComponent(srcDir, callback) {
   const namespaces = fs.readdirSync(srcDir)
     .filter((f) => f.match(/^[a-z]+$/) !== null);
   namespaces.forEach((namespace) => {
@@ -134,7 +126,7 @@ exports.eachComponent = (srcDir, callback) => {
       }
     });
   });
-};
+}
 
 /*
   [{
@@ -147,7 +139,7 @@ exports.eachComponent = (srcDir, callback) => {
     }
   }]
  */
-exports.getComponents = function(srcDir) {
+export function getComponents(srcDir) {
   const srcDir2 = srcDir
     ? path.join(__dirname, '..', srcDir)
     : path.join(__dirname, '..');
@@ -186,16 +178,12 @@ exports.getComponents = function(srcDir) {
     });
   });
   return components;
-};
+}
 
-function dashToCamel(str) {
+export function dashToCamel(str) {
   return str.replace(/-([a-z])/g, m => m[1].toUpperCase());
 }
 
-exports.dashToCamel = dashToCamel;
-
-function camelToDash(str) {
+export function camelToDash(str) {
   return str.replace(/([a-zA-Z])(?=[A-Z])/g, '$1-').toLowerCase()
 }
-
-exports.camelToDash = camelToDash;

src/pg/button/button.ts

@@ -1,4 +1,4 @@
-import { Component, Part, Prop } from '@pictogrammers/element';
+import { Component, Part, Prop, normalizeBoolean } from '@pictogrammers/element';
 
 import template from './button.html';
 import style from './button.css';
@@ -9,13 +9,15 @@ import style from './button.css';
   template
 })
 export default class PgButton extends HTMLElement {
-  @Prop() active: string | boolean = false;
-  @Prop() block: string | boolean = false;
-  @Prop() start: string | boolean = false;
-  @Prop() center: string | boolean = false;
-  @Prop() end: string | boolean = false;
+  @Prop(normalizeBoolean) active: boolean = false;
+  @Prop(normalizeBoolean) block: boolean = false;
+  @Prop(normalizeBoolean) start: boolean = false;
+  @Prop(normalizeBoolean) center: boolean = false;
+  @Prop(normalizeBoolean) end: boolean = false;
 
   @Part() $button: HTMLButtonElement;
+  @Part() $number: HTMLSpanElement;
+  @Part() $bar: HTMLSpanElement;
 
   connectedCallback() {
     this.$button.addEventListener('click', (e) => {
@@ -25,21 +27,20 @@ export default class PgButton extends HTMLElement {
   }
 
   render(changes) {
-    const t = [true, 'true', ''];
     if (changes.active) {
-      this.$button.classList.toggle('active', t.includes(this.active));
+      this.$button.classList.toggle('active', this.active);
     }
     if (changes.start) {
-      this.$button.classList.toggle('start', t.includes(this.start));
+      this.$button.classList.toggle('start', this.start);
     }
     if (changes.end) {
-      this.$button.classList.toggle('end', t.includes(this.end));
+      this.$button.classList.toggle('end', this.end);
     }
     if (changes.center) {
-      this.$button.classList.toggle('center', t.includes(this.center));
+      this.$button.classList.toggle('center', this.center);
     }
     if (changes.block) {
-      this.$button.classList.toggle('block', t.includes(this.block));
+      this.$button.classList.toggle('block', this.block);
     }
   }
 }

webpack.config.js

@@ -1,13 +1,12 @@
-const config = require('@pictogrammers/element-webpack');
-const { exists } = require('@pictogrammers/element-webpack/utils');
+import config from '@pictogrammers/element-webpack';
 
-const { createIndex } = require('./scripts/createIndex');
+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';
 
-module.exports = config({
+export default config({
   port: 3000,
   dist: 'dist',
   index: (components, args, mode) => {

webpack.publish.config.js

@@ -1,9 +1,9 @@
-const path = require('path');
-const {
+import path from 'path';
+import {
   dashToCamel,
   getComponents
-} = require('./scripts/utils');
-const { createIndex } = require('./scripts/createIndex');
+} from './scripts/utils';
+import createIndex from './scripts/createIndex.js';
 
 const DIST_DIR = 'dist';
 
@@ -18,7 +18,7 @@ components.forEach(({ input, examples }) => {
   });
 });
 
-module.exports = (env, argv) => {
+export default (env, argv) => {
   const entries = [];
   const mode = argv.mode === 'production' ? 'production' : 'development';
   function addEntries(input, name) {