transpile lib

Author: assetcrush

.github/workflows/npm-publish.yml

@@ -12,10 +12,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
+
       - uses: actions/setup-node@v1
         with:
           node-version: 14.17.6
           registry-url: https://registry.npmjs.org/
+
+      - name: Install
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
       - run: npm publish --access public
         env:
           NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+package-lock.json
+dist/
+

.npmignore

@@ -4,6 +4,8 @@ npm-debug.log
 
 # Dependency directory
 node_modules
+package-lock.json
+example/
 
 # Runtime data
 tmp

babel.config.json

@@ -0,0 +1,3 @@
+{
+  "presets": ["@babel/preset-react", "@babel/preset-env"]
+}

example/src/App.js

@@ -1,19 +1,15 @@
-import React from "react";
-import ImageCrush from "./ImageCrush";
-import { setKey } from "./key";
+import React from 'react';
+import { ImageCrush, setKey } from './modules';
 
-setKey("test-key");
+setKey('test-key');
 
-const testUrl =
-  "https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg";
+const testUrl = 'https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg';
 
 function App() {
   return (
     <div style={{ width: 50, height: 50 }}>
       <ImageCrush
-        url={
-          "https://cdn.pixabay.com/photo/2021/12/11/07/59/hotel-6862159__340.jpg"
-        }
+        url={testUrl}
         width={50}
         height={50}
       />

example/src/index.js

@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
 
 ReactDOM.render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
-  document.getElementById("root")
+  document.getElementById('root')
 );

example/src/ImageCrush.jsx renamed to example/src/modules/ImageCrush.js

@@ -1,27 +1,22 @@
-import React, { memo, useEffect, useState } from "react";
-import { getKey } from "./key";
+import React, { memo, useEffect, useState } from 'react';
+import { getKey } from './key';
 
-const baseServiceUrl = "https://service.assetcrush.com";
+const baseServiceUrl = 'https://service.assetcrush.com';
 
 const ImageCrush = ({ url, width, height, ...props }) => {
-  const [image, setImage] = useState("");
-  const key = getKey();
-
-  const imageUrl = `https://service.assetcrush.com?width=${
-    width || "auto"
-  }&height=${height || "auto"}&original_uri=${encodeURIComponent(url)}`;
+  const [image, setImage] = useState('');
 
   useEffect(() => {
     if (!url) return;
 
-    const _width = width || "auto";
-    const _height = height || "auto";
+    const _width = width || 'auto';
+    const _height = height || 'auto';
     const imageUrl = `${baseServiceUrl}?width=${_width}&height=${_height}&original_uri=${encodeURIComponent(
       url
     )}`;
     const key = getKey();
 
-    fetch(imageUrl, { headers: { "assetcrush-key": key } })
+    fetch(imageUrl, { headers: { 'assetcrush-key': key } })
       .then((r) => r.blob())
       .then((d) => {
         if (typeof window === undefined) return;
@@ -32,7 +27,7 @@ const ImageCrush = ({ url, width, height, ...props }) => {
 
   if (!image) return null;
 
-  return <img src={image} alt={"resized"} {...props} />;
+  return <img src={image} {...props} />;
 };
 
 export default memo(ImageCrush);

example/src/modules/index.js

@@ -0,0 +1,7 @@
+import ImageCrush from './ImageCrush';
+import { setKey } from './key';
+
+export {
+  setKey,
+  ImageCrush
+}

example/src/key.js renamed to example/src/modules/key.js

@@ -1,4 +1,3 @@
-let key = "";
-
+let key = '';
 export const setKey = (_key) => (key = _key);
 export const getKey = () => key;