refactor to fix major bugs

helmturner · helmturner · commit 8f075c8a2ffc · 2022-12-12T22:39:43.000-06:00
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1 @@
+# Page Intentionally Left Blank
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "typescript.tsdk": "node_modules/typescript/lib"
+}
diff --git a/package.json b/package.json
@@ -1,12 +1,13 @@
 {
     "name": "@helmturner/recma-next-static-images",
-    "version": "1.0.3",
+    "version": "1.1.0",
     "type": "module",
     "licenses": [
         {
             "type": "ISC",
             "url": "https://opensource.org/licenses/ISC"
-        }],
+        }
+    ],
     "engines": {
         "node": ">=14.16"
     },
@@ -16,10 +17,10 @@
     "scripts": {
         "lint": "eslint --ext .js,.ts ./",
         "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "tsc && npm run lint && npm pack --pack-destination ./dist",
+        "build": "tsc && npm run lint && npm pack",
         "prepublishOnly": "yarn run build",
-        "publishUnstable": "npm publish ./dist/*.tgz --tag unstable",
-        "publish": "npm publish ./dist/*.tgz"
+        "publishUnstable": "npm publish --tag unstable",
+        "publish": "npm publish"
     },
     "eslintConfig": {
         "env": {
diff --git a/src/index.ts b/src/index.ts
@@ -1,15 +1,19 @@
 /* eslint-disable unicorn/numeric-separators-style */
 import node_fs from "node:fs";
+import async_node_fs from "node:fs/promises";
 import node_path from "node:path";
 import node_fetch from "node-fetch";
 import node_crypto from "node:crypto";
 import { visit, SKIP, CONTINUE } from "estree-util-visit";
+import { randomUUID } from "node:crypto";
 
 import type * as NodeFetch from "node-fetch";
 import type * as Unified from "unified";
 import type * as ESTreeJsx from "estree-jsx";
 import type * as TreeWalker from "estree-util-visit";
 
+const uuid = () => randomUUID().replace(/-/g, "");
+
 export type Options =
   | {
       cacheDirectory: string | undefined;
@@ -21,94 +25,195 @@ export type Options =
   | null
   | undefined;
 
+declare module "vfile" {
+  interface DataMap {
+    staticImages: {
+      properties: (ESTreeJsx.Property | ESTreeJsx.SpreadElement)[];
+      declarations: (ESTreeJsx.ImportDeclaration | undefined)[];
+      sourceMap: Map<string, string>;
+    };
+  }
+}
+
+type ImageJsxFactory = ESTreeJsx.SimpleCallExpression & {
+  callee: ESTreeJsx.Identifier;
+  arguments: [
+    component: ESTreeJsx.MemberExpression & {
+      property: ESTreeJsx.Identifier & { name: "img" };
+    },
+    children: ESTreeJsx.ObjectExpression,
+    ...rest: (ESTreeJsx.Expression | ESTreeJsx.SpreadElement)[]
+  ];
+};
+
+type ImageData = {
+  uuid: string;
+  replacementSourcePropertyNode: ESTreeJsx.Property;
+  fileExtension: string;
+  importedAs: string;
+  importedFrom: string | undefined;
+  buffer: Buffer | undefined;
+  importDeclaration: ESTreeJsx.ImportDeclaration | undefined;
+};
+
 const recmaStaticImages: Unified.Plugin<
   [(Options | undefined | void)?],
   ESTreeJsx.Program,
   ESTreeJsx.Program
-> = function (options) {
+> = function (this, options) {
   // deconstruct options (if provided) and set defaults where applicable
   const { cacheDirectory, customFetch: _fetch = node_fetch } = options ?? {};
   if (!cacheDirectory) throw new Error("cacheDirectory is required");
-
+  let _cacheDirectory: string = cacheDirectory;
+  if (!/^(\.\/)?public\/.*$/.test(cacheDirectory)) {
+    console.warn(
+      `cacheDirectory should be in the /public directory. Using public/${cacheDirectory} instead.}`
+    );
+    _cacheDirectory = `public/${cacheDirectory.replace(/^\.\//, "")}`;
+  }
   // resolve the cache directory and remove trailing slashes; make sure it exists
-  const cache = node_path.resolve(cacheDirectory).replace(/\/+$/, "");
+  const cache = node_path.resolve(_cacheDirectory).replace(/\/+$/, "");
+
   if (!node_fs.existsSync(cache)) node_fs.mkdirSync(cache);
 
+  const images = new Map<ESTreeJsx.Property & {
+    key: ESTreeJsx.Identifier & { name: "src" };
+    value: ESTreeJsx.SimpleLiteral & { value: string }
+  }, ImageData
+  >();
+
   return async function (tree, vfile) {
     if (!vfile.history[0])
       throw new Error(`File history is empty for ${vfile}`);
 
-    let imageCounter = 0;
-    const sourceDirectory = vfile.history[0].replace(/[^/]*$/, "");
-    const imports: (ESTreeJsx.ImportDeclaration | undefined)[] = [];
-    const isImageJsxFactory = buildImageJsxFactoryTest(tree);
-
-    await visitAsync(tree, isImageJsxFactory, async function (node) {
-      const [argument0, argument1, ...rest] = node.arguments;
-      const newProperties: (ESTreeJsx.Property | ESTreeJsx.SpreadElement)[] =
-        [];
-
-      for (const property of argument1.properties) {
-        if (
-          property.type !== "Property" ||
-          property.key.type !== "Identifier" ||
-          property.key.name !== "src" ||
-          property.value.type !== "Literal" ||
-          typeof property.value.value !== "string"
-        ) {
-          newProperties.push(property);
-          continue;
-        }
+    vfile.path = vfile.history[0];
+    vfile.dirname = node_path.dirname(vfile.path);
+    vfile.info(
+      `Processing ${vfile.path} with history: ${vfile.history.join(", ")}`
+    );
 
-        imageCounter += 1;
-        const value = property.value.value;
-        let url: URL | undefined;
-        let buffer: Buffer | undefined;
-
-        try {
-          // will fail for relative paths
-          url = new URL(value);
-        } catch {
-          // handle relative paths
-          const source = node_path.resolve(sourceDirectory, value);
-          buffer = node_fs.readFileSync(source);
-        }
+    await visitAsync(
+      tree,
+      buildImageJsxFactoryTest(tree),
+      async function (node) {
+        const previousSourcePropertyNode = node.arguments[1].properties.find(
+          (
+            property
+          ): property is ESTreeJsx.Property & {
+            key: ESTreeJsx.Identifier & { name: "src" };
+            value: ESTreeJsx.SimpleLiteral & { value: string };
+          } =>
+            property.type === "Property" &&
+            property.key.type === "Identifier" &&
+            property.key.name === "src" &&
+            property.value.type === "Literal" &&
+            typeof property.value.value === "string"
+        );
 
-        if (url) {
-          const chunks = await _fetch(url.href).then((r) => {
-            if (r.status !== 200)
-              throw new Error(`Failed to fetch ${url?.href}`);
-            return r.arrayBuffer();
-          });
-          buffer = Buffer.from(chunks);
+        if (!previousSourcePropertyNode) return SKIP;
+
+        if (!images.has(previousSourcePropertyNode)) {
+          images.set(previousSourcePropertyNode, await (async () => {
+            const id = uuid();
+            const source = previousSourcePropertyNode.value.value;
+            return {
+              uuid: id,
+              fileExtension: node_path
+                .extname(source)
+                .replace(/(\?|#).*$/, ""),
+              importedAs: `__RecmaStaticImage${id}`,
+              replacementSourcePropertyNode: {
+                ...previousSourcePropertyNode,
+                value: {
+                  type: "Identifier",
+                  name: `__RecmaStaticImage${id}`
+                }
+              },
+              buffer: await (async () => {
+              let url: URL | undefined;
+              try {
+                // will fail for relative paths
+                url = new URL(source);
+              } catch {
+                // handle relative paths
+                const _source = node_path.resolve(
+                  assertAndReturn(vfile.dirname),
+                  source
+                );
+                return async_node_fs.readFile(_source);
+              }
+              if (!url) return;
+              return _fetch(url.href)
+                .then((r) => {
+                  if (r.status !== 200)
+                    throw new Error(`Failed to fetch ${url?.href}`);
+                  return r.arrayBuffer();
+                })
+                .then((r) => Buffer.from(r));
+            })(),
+            importedFrom: undefined,
+            importDeclaration: undefined,
+            }})());
         }
 
-        if (!buffer)
-          throw new Error(`Failed to read the file from ${url?.href}`);
+        images.set(previousSourcePropertyNode, await (async () => {
+          const previous = assertAndReturn(images.get(previousSourcePropertyNode));
+          const _buffer = assertAndReturn(previous.buffer);
+          const _source = `${cache}/${sha256(_buffer)}${previous.fileExtension}`;
+          await async_node_fs.writeFile(_source, _buffer);
+          return {
+            ...previous,
+            importedFrom: _source,
+            importDeclaration: {
+              source: {
+                type: "Literal",
+                value: _source,
+              },
+              specifiers: [
+                {
+                  type: "ImportDefaultSpecifier",
+                  local: {
+                    name: assertAndReturn(previous.importedAs),
+                    type: "Identifier",
+                  },
+                },
+              ],
+              type: "ImportDeclaration",
+            }
+          };
+        })());
 
-        const extension = node_path.extname(value).replace(/(\?|#).*$/, "");
-        const path = `${cache}/${sha256(buffer)}${extension}`;
-        const declaration = generateImportDeclaration(path, imageCounter);
+        node.arguments = [
+          node.arguments[0],
+          {
+            ...node.arguments[1],
+            properties: node.arguments[1].properties.map((property) => {
+              if (images.has(property as typeof previousSourcePropertyNode)) {
+                return assertAndReturn(images.get(property as typeof previousSourcePropertyNode))
+                  .replacementSourcePropertyNode;
+              }
+              return property;
+            })
+          }
+        ];
 
-        imports.push(declaration);
-        newProperties.push(buildSrcPropertyNode(imageCounter));
-        node_fs.writeFile(path, buffer, (error) => {
-          if (error) throw error;
-        });
+        return SKIP;
       }
+    );
 
-      node.arguments = [
-        argument0,
-        { ...argument1, properties: newProperties },
-        ...rest,
-      ];
-    });
-    prependImportsToTree(tree, imports);
+    await prependImportsToTree(
+      tree,
+      [...images.values()].map((image) => image.importDeclaration)
+    );
   };
 };
-
 export default recmaStaticImages;
 
+function assertAndReturn<T>(value: T | null | undefined): T {
+  if (value === null || value === undefined) throw new Error("Unexpected null");
+  return value;
+}
+
 function prependImportsToTree(
   tree: ESTreeJsx.Program,
   imports: (ESTreeJsx.ImportDeclaration | undefined)[]
@@ -137,18 +242,7 @@ function buildImageJsxFactoryTest(tree: ESTreeJsx.Program) {
     }
     return CONTINUE;
   });
-  return function (
-    node: TreeWalker.Node
-  ): node is ESTreeJsx.SimpleCallExpression & {
-    callee: ESTreeJsx.Identifier;
-    arguments: [
-      component: ESTreeJsx.MemberExpression & {
-        property: ESTreeJsx.Identifier & { name: "img" };
-      },
-      children: ESTreeJsx.ObjectExpression,
-      ...rest: (ESTreeJsx.Expression | ESTreeJsx.SpreadElement)[]
-    ];
-  } {
+  return function (node: TreeWalker.Node): node is ImageJsxFactory {
     return (
       node.type === "CallExpression" &&
       "callee" in node &&
@@ -166,46 +260,6 @@ function sha256(data: node_crypto.BinaryLike) {
   return node_crypto.createHash("sha256").update(data).digest("hex");
 }
 
-function generateImportDeclaration(
-  path: string,
-  index: number
-): ESTreeJsx.ImportDeclaration {
-  return {
-    source: {
-      type: "Literal",
-      value: path,
-    },
-    specifiers: [
-      {
-        type: "ImportDefaultSpecifier",
-        local: {
-          name: `static_image_${index}`,
-          type: "Identifier",
-        },
-      },
-    ],
-    type: "ImportDeclaration",
-  };
-}
-
-// eslint-disable-next-line unicorn/prevent-abbreviations
-function buildSrcPropertyNode(index: number): ESTreeJsx.Property {
-  return {
-    type: "Property",
-    key: {
-      type: "Identifier",
-      name: "src",
-    },
-    value: {
-      type: "Identifier",
-      name: `static_image_${index}`,
-    },
-    kind: "init",
-    method: false,
-    shorthand: false,
-    computed: false,
-  };
-}
 /**
  * No async visitor is provided, so we must make our own.
  * @see https://github.com/syntax-tree/unist-util-visit-parents/issues/8
@@ -220,6 +274,6 @@ async function visitAsync<T extends TreeWalker.Node>(
     if (test(node)) matches.push(node);
   });
   const promises = matches.map((match) => asyncVisitor(match));
-  await Promise.all(promises);
+  await Promise.allSettled(promises);
   return;
 }
diff --git a/tsconfig.json b/tsconfig.json
@@ -46,7 +46,7 @@
     "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
     "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
-    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
     "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
     "removeComments": false,                           /* Disable emitting comments. */
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "typescript.tsdk": "node_modules/typescript/lib"`
	`3`	`+}`