js-draw 0.17.3 → 0.18.0

package/.github/workflows/firebase-hosting-merge.yml

@@ -18,6 +18,8 @@ jobs:
       - uses: actions/checkout@v3
       - name: Install dependencies
         run: yarn install
+      - name: Test imports
+        run: yarn dist-test
       - name: Run tests
         run: yarn test
       - name: Lint

package/.github/workflows/firebase-hosting-pull-request.yml

@@ -19,6 +19,8 @@ jobs:
       - uses: actions/checkout@v3
       - name: Install dependencies
         run: yarn install
+      - name: Test imports
+        run: yarn dist-test
       - name: Run tests
         run: yarn test
       - name: Lint

package/.github/workflows/github-pages.yml

@@ -34,6 +34,8 @@ jobs:
         uses: actions/checkout@v3
       - name: Install dependencies
         run: yarn install
+      - name: Test imports
+        run: yarn dist-test
       - name: Run tests
         run: yarn test
       - name: Lint

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 0.18.0
+ * Publish both CommonJS and ES Modules
+ * Fix ES module imports.
+
+# 0.17.4
+ * Fix `CanvasRenderer` and `SVGRenderer` not exported.
+ * Fix pasting images copied from js-draw into some external apps.
+     * Pasting selected items from `js-draw` still doesn't work for many apps.
+
 # 0.17.3
  * Fix `isRestylableComponent` not exported.
  * Add a method to get the `Editor`'s average background color.
@@ -8,7 +17,7 @@
      - This was causing duplicated `TextComponent`s to have, in part, the same styles as the original, even after attempting to restyle them with the restyle tool.
    - Find tool: Don't add viewport transformations to the undo stack.
    - Collaborative editing: Fix changing background size/location not synced between editors.
-   - Upgrade dependencies to latest versions ([see commit for details](https://github.com/personalizedrefrigerator/js-draw/commit/427a64037320ca96232d47f268258206398f3796))
+   - Upgrades dependencies to latest versions ([see commit for details](https://github.com/personalizedrefrigerator/js-draw/commit/427a64037320ca96232d47f268258206398f3796))
 
 # 0.17.1
  * Bug fixes

package/README.md

@@ -4,11 +4,11 @@
 
 ![](docs/img/js-draw.jpg)
 
-For example usage, see [one of the examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md) or read [the (work-in-progress) documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/lib.html).
+For example usage, see [one of the examples](https://github.com/personalizedrefrigerator/js-draw/blob/main/docs/examples.md) or read [the documentation](https://personalizedrefrigerator.github.io/js-draw/typedoc/modules/lib.html).
 
 # API
 
-To use `js-draw`, 
+To use `js-draw`,
 
 ## Creating an `Editor`
 
@@ -33,14 +33,14 @@ import 'js-draw/bundle';
 
 const editor = new Editor(document.body);
 ```
-`js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing it applies editor-specific CSS to the document.
+`js-draw/bundle` is a version of the editor pre-processed by `Webpack`. As such, `import`ing or including it with a `<script src="..."></script>` tag applies editor-specific CSS to the document.
 
 ### Without a bundler
 
 If you're not using a bundler, consider using the pre-bundled editor:
 ```html
-<!-- Replace 0.2.3 with the latest version of js-draw -->
-<script src="https://cdn.jsdelivr.net/npm/js-draw@0.2.3/dist/bundle.js"></script>
+<!-- Replace 0.17.3 with the latest version of js-draw -->
+<script src="https://cdn.jsdelivr.net/npm/js-draw@0.17.3/dist/bundle.js"></script>
 <script>
     const editor = new jsdraw.Editor(document.body);
     editor.addToolbar();
@@ -65,6 +65,15 @@ toolbar.addActionButton('Save', () => {
     console.log('The saved SVG:', svgElem.outerHTML);
 });
 ```
+or alternatively, with an icon,
+```ts
+toolbar.addActionButton({
+  label: 'Save'
+  icon: editor.icons.makeSaveIcon(),
+}, () => {
+    // Save content here.
+});
+```
 
 ## Loading from an SVG
 
@@ -95,7 +104,7 @@ renders as
 
 ![screenshot of the image editor, displaying a green checkmark. The circle is invisible](docs/img/unsupported-elements--in-editor.png)
 
-but exports to 
+but exports to
 ```xml
 <svg viewBox="156 74 200 150" width="200" height="150" version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg"><g><path d="M156,150M156,150Q190,190 209,217L213,215Q193,187 160,148M209,217M209,217Q212,218 236,178L232,176Q210,215 213,215M236,178M236,178Q240,171 307,95L305,93Q237,168 232,176M307,95M307,95Q312,90 329,78L327,74Q309,87 305,93" fill="#07a837"></path></g><circle cx="200" cy="100" r="40" fill="red"></circle></svg>
 ```
@@ -158,7 +167,7 @@ const editor = new Editor(document.body, {
         select: 'Selecciona',
         thicknessLabel: 'Tamaño: ',
         colorLabel: 'Color: ',
-        
+
         ...
     },
 });
@@ -205,4 +214,4 @@ body .imageEditorContainer {
     --secondary-foreground-color: black;
 }
 ```
-disables the dark theme and creates a theme that primarially uses yellow/green colors.
+disables the dark theme and creates a theme that primarily uses yellow/green colors.

package/build_tools/postDist.ts

@@ -0,0 +1,71 @@
+
+import { readdir, stat, rename, readFile, writeFile, unlink } from 'fs/promises';
+import path from 'path';
+
+// Script to be run after building JavaScript files from TypeScript.
+// TODO: This is very hacky.
+// TODO: [Use the TypeScript Compiler API instead.](https://github.com/microsoft/TypeScript/wiki/Using-the-Compiler-API)
+
+// Iterates over every JavaScript file in [directory].
+const forEachFile = async (directory: string, processFile: (filePath: string)=>Promise<void>) => {
+	const files = await readdir(directory);
+
+	await Promise.all(files.map(async (file) => {
+		const filePath = path.join(directory, file);
+		const stats = await stat(filePath);
+
+		if (stats.isDirectory()) {
+			await forEachFile(filePath, processFile);
+		} else if (stats.isFile()) {
+			await processFile(filePath);
+		} else {
+			throw new Error('Unknown file type!');
+		}
+	}));
+};
+
+const removeFiles = async (directory: string, filePattern: RegExp) => {
+	await forEachFile(directory, async (filePath: string) => {
+		if (!filePath.match(filePattern)) {
+			return;
+		}
+
+		await unlink(filePath);
+	});
+};
+
+const main = async () => {
+	const rootDir = path.dirname(__dirname);
+	const cjsPath = `${rootDir}/dist/cjs`;
+	const mjsPath = `${rootDir}/dist/mjs`;
+
+	const testPattern = /\.test\.js$/;
+	await removeFiles(cjsPath, testPattern);
+	await removeFiles(mjsPath, testPattern);
+
+	// We need to replace imports in ESM files.
+	await forEachFile(mjsPath, async (filePath: string) => {
+		if (!filePath.endsWith('.js')) {
+			return;
+		}
+
+		// Rename
+		const newPath = filePath.replace(/\.js$/, '.mjs');
+		await rename(filePath, newPath);
+
+		// Change imports from
+		//   import foo from './bar'
+		// to
+		//   import foo from './bar.mjs'
+		// and exports similarly.
+		let contents = await readFile(newPath, { encoding: 'utf-8' });
+
+		// TODO: Switch to using the TypeScript compiler API. This has the danger of changing imports
+		// in multi-line strings.
+		contents = contents.replace(/([\n]|^)(import|export)(.*)from\s+(['"])(\.*\/[^\n]+)(['"])/g, '$1$2 $3 from $4$5.mjs$6');
+
+		await writeFile(newPath, contents);
+	});
+};
+
+main();