feat(node): bundle source and inline wasm

Cargo.toml.d.ts

@@ -0,0 +1,3 @@
+type Exports = typeof import('./target/wasm-pack/blurhash-to-css/index');
+declare const exports: () => Promise<Exports>;
+export default exports;

jest.config.js

@@ -2,6 +2,6 @@ module.exports = {
   clearMocks: true,
   moduleFileExtensions: ['ts', 'js'],
   testEnvironment: 'node',
-  testMatch: ['<rootDir>/*.spec.(ts|js)'],
+  testMatch: ['<rootDir>/src/*.spec.(ts|js)'],
   transform: { '^.+\\.ts$': 'ts-jest' },
 };

package.json

@@ -4,19 +4,23 @@
   "version": "0.2.1",
   "author": "Jamie Mason <jamie@foldleft.io> (https://github.com/JamieMason)",
   "bugs": "https://github.com/JamieMason/blurhash-to-css/issues",
+  "dependencies": {
+    "tslib": "2.1.0"
+  },
   "devDependencies": {
+    "@rollup/plugin-typescript": "8.1.1",
     "@types/jest": "26.0.20",
+    "@wasm-tool/rollup-plugin-rust": "1.0.5",
     "jest": "26.6.3",
+    "rollup": "2.38.5",
     "ts-jest": "26.5.0",
     "typescript": "4.1.3"
   },
   "engines": {
     "node": ">=10"
   },
   "files": [
-    "index.d.ts",
-    "index.js",
-    "pkg"
+    "dist"
   ],
   "keywords": [
     "blur",
@@ -36,14 +40,14 @@
     "webperf"
   ],
   "license": "MIT",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "manager": "yarn",
   "repository": "JamieMason/blurhash-to-css",
   "scripts": {
-    "build": "npm run build:wasm && npm run build:ts",
-    "build:ts": "rm -rf ./dist && tsc --project .",
-    "build:wasm": "rm -rf ./pkg && wasm-pack build --target nodejs",
-    "prepack": "npm run build",
-    "test": "npm run test:wasm && npm run test:ts",
+    "build": "rollup --config",
+    "prebuild": "rm -rf ./dist && rm -rf ./target",
+    "prepack": "yarn build",
+    "test": "yarn test:wasm && yarn test:ts",
     "test:ts": "jest",
     "test:wasm": "cargo test"
   }

rollup.config.js

@@ -0,0 +1,22 @@
+import rust from '@wasm-tool/rollup-plugin-rust';
+import rollupTypescript from '@rollup/plugin-typescript';
+
+export default {
+  input: {
+    index: 'src/index.ts',
+  },
+  output: {
+    dir: 'dist',
+    format: 'cjs',
+  },
+  watch: false,
+  plugins: [
+    rust({
+      debug: false,
+      inlineWasm: true,
+      nodejs: true,
+      verbose: true,
+    }),
+    rollupTypescript(),
+  ],
+};

src/index.spec.ts

@@ -0,0 +1,32 @@
+/** More tests can be found in src/lib.rs */
+import { blurhashToCss } from '../dist';
+
+it('converts a blurhash into a CSS object', (done) => {
+  blurhashToCss({
+    blurhash: 'eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU',
+    width: 400,
+    height: 600,
+  })
+    .then((css) => {
+      expect(css).toEqual({
+        backgroundImage: [
+          'linear-gradient(90deg,rgb(143,156,100) 10%,rgb(158,164,124) 10% 20%,rgb(174,176,146) 20% 30%,rgb(181,183,155) 30% 40%,rgb(177,182,148) 40% 50%,rgb(164,174,132) 50% 60%,rgb(150,163,116) 60% 70%,rgb(139,153,105) 70% 80%,rgb(133,148,98) 80% 90%,rgb(131,146,94) 90% 100%)',
+          'linear-gradient(90deg,rgb(122,139,78) 10%,rgb(134,145,99) 10% 20%,rgb(148,154,119) 20% 30%,rgb(158,161,128) 30% 40%,rgb(156,162,124) 40% 50%,rgb(145,155,111) 50% 60%,rgb(128,142,95) 60% 70%,rgb(116,132,84) 70% 80%,rgb(115,130,80) 80% 90%,rgb(119,132,80) 90% 100%)',
+          'linear-gradient(90deg,rgb(103,121,57) 10%,rgb(109,123,74) 10% 20%,rgb(122,130,93) 20% 30%,rgb(135,139,105) 30% 40%,rgb(140,143,107) 40% 50%,rgb(130,136,98) 50% 60%,rgb(109,121,82) 60% 70%,rgb(94,109,69) 70% 80%,rgb(99,110,67) 80% 90%,rgb(111,117,71) 90% 100%)',
+          'linear-gradient(90deg,rgb(111,121,72) 10%,rgb(116,123,89) 10% 20%,rgb(129,131,109) 20% 30%,rgb(145,143,124) 30% 40%,rgb(152,149,129) 40% 50%,rgb(143,142,122) 50% 60%,rgb(123,125,107) 60% 70%,rgb(106,110,91) 70% 80%,rgb(109,111,84) 80% 90%,rgb(119,118,84) 90% 100%)',
+          'linear-gradient(90deg,rgb(130,132,97) 10%,rgb(138,136,117) 10% 20%,rgb(153,147,141) 20% 30%,rgb(168,161,157) 30% 40%,rgb(175,168,161) 40% 50%,rgb(167,161,153) 50% 60%,rgb(148,144,137) 60% 70%,rgb(130,126,119) 70% 80%,rgb(125,122,105) 80% 90%,rgb(129,125,99) 90% 100%)',
+          'linear-gradient(90deg,rgb(132,134,105) 10%,rgb(142,140,126) 10% 20%,rgb(158,153,150) 20% 30%,rgb(174,167,167) 30% 40%,rgb(180,174,171) 40% 50%,rgb(173,169,164) 50% 60%,rgb(155,151,147) 60% 70%,rgb(135,132,127) 70% 80%,rgb(123,122,108) 80% 90%,rgb(121,121,97) 90% 100%)',
+          'linear-gradient(90deg,rgb(113,121,90) 10%,rgb(123,127,109) 10% 20%,rgb(140,139,132) 20% 30%,rgb(156,153,149) 30% 40%,rgb(164,161,155) 40% 50%,rgb(159,156,149) 50% 60%,rgb(141,140,133) 60% 70%,rgb(118,119,111) 70% 80%,rgb(101,105,89) 80% 90%,rgb(94,101,74) 90% 100%)',
+          'linear-gradient(90deg,rgb(94,106,60) 10%,rgb(100,108,77) 10% 20%,rgb(113,116,98) 20% 30%,rgb(130,128,115) 30% 40%,rgb(140,136,123) 40% 50%,rgb(137,133,119) 50% 60%,rgb(120,118,104) 60% 70%,rgb(96,98,81) 70% 80%,rgb(76,84,56) 80% 90%,rgb(68,78,36) 90% 100%)',
+          'linear-gradient(90deg,rgb(100,103,29) 10%,rgb(100,101,50) 10% 20%,rgb(107,104,72) 20% 30%,rgb(120,112,88) 30% 40%,rgb(130,118,95) 40% 50%,rgb(128,116,91) 50% 60%,rgb(114,104,76) 60% 70%,rgb(95,89,55) 70% 80%,rgb(82,79,31) 80% 90%,rgb(79,77,12) 90% 100%)',
+          'linear-gradient(90deg,rgb(115,109,20) 10%,rgb(114,106,48) 10% 20%,rgb(117,106,71) 20% 30%,rgb(126,110,84) 30% 40%,rgb(133,114,87) 40% 50%,rgb(132,112,80) 50% 60%,rgb(121,102,65) 60% 70%,rgb(107,92,49) 70% 80%,rgb(99,88,36) 80% 90%,rgb(99,88,31) 90% 100%)',
+        ].join(','),
+        backgroundPosition: '0 0,0 11%,0 22%,0 33%,0 44%,0 56%,0 67%,0 78%,0 89%,0 100%',
+        backgroundRepeat: 'no-repeat',
+        backgroundSize: '100% 10%',
+        filter: 'blur(24px)',
+        transform: 'scale(1.2)',
+      });
+    })
+    .then(done, done);
+});

index.ts → src/index.ts

@@ -1,4 +1,4 @@
-import { blurhash_to_css } from './pkg/blurhash_to_css';
+import wasm from '../Cargo.toml';
 
 export interface BlurhashCss {
   backgroundImage: string;
@@ -9,14 +9,16 @@ export interface BlurhashCss {
   transform: string;
 }
 
-export function blurhashToCss({
+export async function blurhashToCss({
   blurhash,
   width,
   height,
 }: {
   blurhash: string;
   width: number;
   height: number;
-}): BlurhashCss {
-  return JSON.parse(blurhash_to_css(blurhash, width, height)) as BlurhashCss;
+}): Promise<BlurhashCss> {
+  const exports = await wasm();
+  const json = exports.blurhash_to_css(blurhash, width, height);
+  return JSON.parse(json) as BlurhashCss;
 }

tsconfig.json

@@ -1,12 +1,13 @@
 {
   "compilerOptions": {
     "declaration": true,
+    "declarationDir": "dist",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
-    "module": "commonjs",
+    "target": "ES6",
+    "module": "ES6",
     "skipLibCheck": true,
-    "strict": true,
-    "target": "ES2019"
+    "strict": true
   },
   "exclude": ["**/*.spec.ts"]
 }