next-blurhash-previews 0.0.1

package/output.md

@@ -0,0 +1,15 @@
+<div>
+  <img />
+  <span>Hey there 2</span>
+</div>
+
+<some-component>
+  <p>Hello</p>
+</some-component>
+
+Yo
+
+<div>
+  <img />
+  <span>Hey there 2</span>
+</div>

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "next-blurhash-previews",
+  "version": "0.0.1",
+  "description": "",
+  "main": "index.js",
+  "bin": {
+    "next-static-markdown-previews": "./bin/markdown-sync.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "vite build",
+    "build-watch": "vite build -w"
+  },
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arackaf/next-static-image-previews.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/arackaf/next-static-image-previews/issues"
+  },
+  "homepage": "https://github.com/arackaf/next-static-image-previews#readme",
+  "dependencies": {
+    "@types/react": "^18.0.15",
+    "@types/react-dom": "^18.0.6",
+    "@vitejs/plugin-react": "^1.3.2",
+    "blurhash": "^1.1.5",
+    "next": "^12.2.0",
+    "node-html-parser": "^5.3.3",
+    "prettier": "^2.7.1",
+    "remark": "^14.0.2",
+    "retext": "^8.1.0",
+    "sharp": "^0.30.7",
+    "to-vfile": "^7.2.3",
+    "unist-util-visit": "^4.1.0",
+    "unist-util-visit-parents": "^5.1.0",
+    "vfile-reporter": "^7.0.4",
+    "vite": "^2.9.13"
+  }
+}

package/plugin.js

@@ -0,0 +1,78 @@
+import fs from "fs";
+import path, { dirname } from "path";
+
+import sharp from "sharp";
+import { encode, isBlurhashValid } from "blurhash";
+
+import { visit } from "unist-util-visit";
+import { visitParents } from "unist-util-visit-parents";
+
+import HTMLParser from "node-html-parser";
+import prettier from "prettier";
+
+import { fileURLToPath } from "url";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+export default function retextSentenceSpacing() {
+  return (tree, file, done) => {
+    visitParents(tree, "image", async (node, ancestors) => {
+      const { url } = node;
+
+      //const resolvedPath = path.join(process.cwd(), url);
+      const resolvedPath = path.join(__dirname, url);
+      console.log(resolvedPath);
+
+      const image = sharp(resolvedPath);
+      const dimensions = await image.metadata();
+
+      const { width, height } = dimensions;
+      console.log(height, width);
+
+      image
+        .raw()
+        .ensureAlpha()
+        .toBuffer((err, buffer) => {
+          console.log("got buffer");
+          try {
+            if (err) {
+              console.log("Error getting buffer", err);
+            } else {
+              const blurhash = encode(new Uint8ClampedArray(buffer), width, height, 4, 4);
+              if (isBlurhashValid(blurhash)) {
+                console.log({ blurhash, w: width, h: height });
+              } else {
+                return console.log("FAIL");
+              }
+            }
+          } catch (err) {
+            return console.log("FAIL", err);
+          }
+        });
+
+      const parent = ancestors[ancestors.length - 1];
+      const index = parent.children.indexOf(node);
+
+      const newNode = HTMLParser.parse(`<div>
+        <img />
+        <span>Hey there 2</span>
+        </div>`);
+
+      parent.children[index] = {
+        type: "html",
+        value: prettier.format(newNode.outerHTML, { parser: "html" }).trimEnd(),
+      };
+
+      setTimeout(() => {
+        done();
+      }, 3000);
+      //parent.children[index] = replacement;
+
+      // parent.children.push({
+      //   type: "html",
+      //   value: `<div><img /><span>Hey there</span></div>`,
+      //   position: node.position,
+      // });
+    });
+  };
+}

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "node"
+  },
+  "include": ["vite.config.ts"]
+}

package/util/setBootstrap.js

@@ -0,0 +1,13 @@
+import fs from "fs";
+
+export default function writeBootstrapScript() {
+  return {
+    name: "write-bootstrap-script",
+    closeBundle() {
+      let BootstrapModule = fs.readFileSync("./components/imagePreviewBootstrap.tsx", "utf8");
+      const bootstrapScript = fs.readFileSync("./build/ImageWithPreview.js", "utf8");
+      BootstrapModule = BootstrapModule.replace("/*HERE*/", bootstrapScript.replace(/[\r\n]\s*$/, "").replace(/`/g, "\\`")).replace(/\${/g, "\\${");
+      fs.writeFileSync("./imagePreviewBootstrap.js", BootstrapModule);
+    },
+  };
+}

package/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import writeBootstrapPlugin from "./util/setBootstrap";
+
+export default defineConfig({
+  build: {
+    target: "es2022",
+    outDir: "./build",
+    lib: {
+      entry: "components/ImageWithPreview.tsx",
+      formats: ["cjs"],
+      fileName: () => "ImageWithPreview.js",
+      name: "imageWithPreview",
+    },
+    //minify: false,
+    rollupOptions: {
+      external: ["react", "react-dom", "next", "next/script"],
+    },
+  },
+  plugins: [react(), writeBootstrapPlugin()],
+});

package/yalc.lock

@@ -0,0 +1,9 @@
+{
+  "version": "v1",
+  "packages": {
+    "next-static-image-previews": {
+      "signature": "69aea1f5f42d0d307c90b7b1f9d6ff8e",
+      "file": true
+    }
+  }
+}