init project

.editorconfig

@@ -0,0 +1,11 @@
+# EditorConfig: http://EditorConfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+tab_width = 2

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+lib/
+es/

.npmignore

@@ -0,0 +1,3 @@
+tsconfig.json
+src
+demo

.prettierrc

@@ -0,0 +1,18 @@
+{
+  "printWidth": 100,
+  "overrides": [
+    {
+      "files": ["*.js", "*.jsx", "*.ts", "*.tsx"],
+      "options": {
+        "singleQuote": true,
+        "trailingComma": "all"
+      }
+    },
+    {
+      "files": "*.json",
+      "options": {
+        "parser": "json"
+      }
+    }
+  ]
+}

README.md

@@ -0,0 +1,13 @@
+# react-blurhash
+
+> React component for using the [blurhash algorithm](https://blurha.sh)
+
+## Install
+
+```sh
+npm install --save react-blurhash
+```
+
+## Browser support
+
+Blurhash depends on `Uint8ClampedArray`, which is supported on all mainstream browsers and >=IE11.

demo/Demo.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { hot } from 'react-hot-loader/root';
+
+import Blurhash from '../src';
+
+const Demo = () => <Blurhash />;
+
+export default hot(Demo);

demo/index.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Demo from './Demo';
+
+const rootElement = document.createElement('div');
+
+if (!document.querySelector('div')) {
+  document.body.appendChild(rootElement);
+}
+
+ReactDOM.render(<Demo />, rootElement);

package.json

@@ -0,0 +1,46 @@
+{
+  "name": "react-blurhash",
+  "version": "0.1.0",
+  "description": "Blurhash implementation for React",
+  "keywords": ["blurhash", "blur", "hash", "image", "react", "component"],
+  "license": "MIT",
+  "author": "nygardk",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/woltapp/react-blurhash"
+  },
+  "homepage": "https://blurha.sh",
+  "main": "lib/index.js",
+  "types": "lib/index.t.js",
+  "module": "es/index.js",
+  "scripts": {
+    "prepublishOnly": "npm run build",
+    "build": "npm run build:es && npm run build:lib",
+    "build:es": "rm -rf ./es   && npm run ts -- --module es2015   --outDir ./es",
+    "build:lib": "rm -rf ./lib && npm run ts -- --module commonjs --outDir ./lib",
+    "demo": "webpack-dev-server --config webpack.demo.config.js --hot --progress",
+    "prettier": "prettier src/**/*.ts",
+    "prettier-fix": "npm run prettier -- --write",
+    "ts": "tsc",
+    "ts:watch": "npm run ts -- --noEmit --watch"
+  },
+  "peerDependencies": {
+    "blurhash": "^1.1.1"
+  },
+  "devDependencies": {
+    "@types/prop-types": "^15.7.1",
+    "@types/react": "^16.8.22",
+    "@types/react-dom": "^16.8.4",
+    "blurhash": "^1.1.1",
+    "html-webpack-plugin": "^3.2.0",
+    "prettier": "1.18.2",
+    "react": "^16.8.6",
+    "react-dom": "^16.8.6",
+    "react-hot-loader": "^4.11.1",
+    "ts-loader": "6.0.4",
+    "typescript": "3.5.2",
+    "webpack": "4.35.0",
+    "webpack-cli": "^3.3.5",
+    "webpack-dev-server": "3.7.2"
+  }
+}

src/Blurhash.tsx

@@ -0,0 +1,3 @@
+import React from 'react';
+
+export default () => <div>blurhash</div>;

src/index.ts

@@ -0,0 +1 @@
+export { default } from './Blurhash';

tsconfig.demo.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "rootDir": ".",
+    "module": "commonjs",
+    "declaration": false,
+    "allowJs": true,
+    "esModuleInterop": true
+  },
+  "include": ["src", "demo"]
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "declaration": true,
+    "outDir": "./lib",
+    "sourceMap": true,
+    "alwaysStrict": true,
+    "noImplicitAny": true,
+    "allowSyntheticDefaultImports": true,
+    "jsx": "react"
+  },
+  "include": ["src"]
+}

webpack.demo.config.js

@@ -0,0 +1,39 @@
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: 'development',
+  entry: './demo',
+  resolve: {
+    extensions: ['.ts', '.tsx', '.js', '.jsx'],
+  },
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.(jsx?|tsx?)$/,
+        use: [
+          'react-hot-loader/webpack',
+          {
+            loader: 'ts-loader',
+            options: {
+              configFile: 'tsconfig.demo.json',
+            },
+          },
+        ],
+        exclude: /node_modules/,
+      },
+    ],
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      hash: false,
+      filename: 'index.html',
+      title: 'react-blurhash demo',
+    }),
+  ],
+  devServer: {
+    contentBase: path.join(__dirname, 'demo'),
+    port: 9000,
+  },
+};