feature: large org changes to publish npm package

Author: steviecs

.babelrc

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

.codesandbox/workspace.json

@@ -1,6 +1,13 @@
 node_modules
+
 public
+
 build
+
 .vscode
+
 .codesandbox
+
 package-lock.json
+
+dist

.gitignore

@@ -1,4 +1,4 @@
-import Fallback from "../components/Fallback";
+import Fallback from "../src";
 import { render, screen } from "@testing-library/react";
 
 it("does not render a skeleton if data has been fetched", () => {
@@ -12,7 +12,7 @@ it("does not render a skeleton if data has been fetched", () => {
 });
 
 it.each(['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'img'])
-  ("renders a skeleton if data has not yet been fetched", (t) => {
+  ("renders a skeleton if data has not yet been fetched for a %s element", (t) => {
   render(
     <Fallback isLoading fallbackOnStaticContent>
       <p>Lorem ipsum</p>

src/__tests__/Fallback.test.tsx renamed to __tests__/Fallback.test.tsx

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface FallbackProps {
+    isLoading: boolean;
+    children: JSX.Element | JSX.Element[];
+    fallbackOnStaticContent?: boolean;
+}
+export default function Fallback({ isLoading, children, fallbackOnStaticContent }: FallbackProps): JSX.Element;
+export {};

examples/index.d.ts

@@ -0,0 +1,57 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var tags = ["P", "H1", "H2", "H3", "H4", "H5", "H6", "SPAN", "IMG"];
+function assignFallbackAttributes(el) {
+    var styles = "";
+    el.textContent = el.textContent || "_";
+    var css = window.getComputedStyle(el);
+    for (var i = 0; i < css.length; i++) {
+        styles += "background-color:rgba(0, 0, 0, 0.11);animation: skeleton 1s linear infinite alternate both;".concat(css[i], ":").concat(css.getPropertyValue("" + css[i]), ";");
+    }
+    return styles;
+}
+function useFallback(_a) {
+    var isLoading = _a.isLoading, fallbackOnStaticContent = _a.fallbackOnStaticContent;
+    var ref = React.useRef();
+    var withFallback = function (tree) {
+        var Fallback = React__default["default"].forwardRef(function (_, ref) {
+            return React__default["default"].cloneElement(tree, { ref: ref });
+        });
+        if (isLoading) {
+            return (jsxRuntime.jsx(Fallback, { ref: function (el) {
+                    var _a;
+                    ref.current = el;
+                    (_a = ref.current) === null || _a === void 0 ? void 0 : _a.querySelectorAll("*").forEach(function (el) {
+                        var _a;
+                        if (tags.includes(el.tagName) || ((_a = el.firstChild) === null || _a === void 0 ? void 0 : _a.nodeValue)) {
+                            var skeleton = document.createElement("div");
+                            if (fallbackOnStaticContent || !el.textContent) {
+                                skeleton.style.cssText = assignFallbackAttributes(el);
+                                el.replaceWith(skeleton);
+                            }
+                        }
+                    });
+                } }));
+        }
+        else {
+            return tree;
+        }
+    };
+    return { withFallback: withFallback };
+}
+
+function Fallback(_a) {
+    var isLoading = _a.isLoading, children = _a.children, fallbackOnStaticContent = _a.fallbackOnStaticContent;
+    var withFallback = useFallback({ isLoading: isLoading, fallbackOnStaticContent: fallbackOnStaticContent }).withFallback;
+    return withFallback(jsxRuntime.jsx("div", { children: children }));
+}
+
+exports["default"] = Fallback;
+//# sourceMappingURL=index.tsx.map

examples/index.tsx

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface UseFallbackProps {
+    isLoading: boolean;
+    fallbackOnStaticContent?: boolean;
+}
+export default function useFallback({ isLoading, fallbackOnStaticContent }: UseFallbackProps): {
+    withFallback: (tree: JSX.Element) => JSX.Element;
+};
+export {};

examples/index.tsx.map

@@ -0,0 +1,15 @@
+// For a detailed explanation regarding each configuration property, visit:
+// https://jestjs.io/docs/en/configuration.html
+
+module.exports = {
+  moduleFileExtensions: [
+    "js",
+    "ts",
+    "jsx",
+    "tsx"
+  ],
+  testEnvironment: 'node',
+  testMatch: ['**/*.test.[jt]s?(x)'],
+  testEnvironment: 'jest-environment-jsdom',
+  testPathIgnorePatterns: ['/node_modules/'],
+};

examples/useFallback.d.ts

@@ -1,6 +1,6 @@
 {
-  "name": "react-fallback",
-  "version": "1.0.0",
+  "name": "@steviecs/react-fallback",
+  "version": "1.0.1",
   "author": "steviecs",
   "description": "A POC component library for rendering adaptive skeletons that adjust to the shape of your UI's layout while data is being fetched",
   "keywords": [
@@ -12,9 +12,10 @@
     "fallback"
   ],
   "license": "MIT",
-  "main": "src/index.tsx",
-  "dependencies": {
-    "react": "17.0.2"
+  "main": "dist/index.tsx",
+  "peerDependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@emotion/react": "11.7.1",
@@ -25,16 +26,19 @@
     "@types/jest": "^27.5.1",
     "@types/react": "^17.0.37",
     "@types/react-dom": "17.0.0",
+    "babel-core": "^6.26.3",
+    "babel-runtime": "^6.26.0",
+    "jest": "^27.5.1",
     "mui": "0.0.1",
-    "react-dom": "17.0.2",
     "react-scripts": "^5.0.1",
+    "rollup": "^2.75.3",
+    "rollup-plugin-typescript2": "^0.31.2",
     "typescript": "^4.7.2"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "test": "jest"
   },
   "browserslist": {
     "production": [
@@ -47,5 +51,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "files": [
+    "dist"
+  ]
 }