Fixed publishing issues

Fixed carbon.sh screenshot path issues.
Updated CodeSandbox link.
Visualizer for bundle.
Externalize all dependencies.

Author: Chris Brown

.gitignore

@@ -20,7 +20,6 @@ yarn-error.log*
 .next/
 out/
 
-
 # TypeScript
 *.tsbuildinfo
 
@@ -33,6 +32,11 @@ out/
 dist
 build
 spring/styles.css
+framer/styles.css
+
+# rollup-plugin-visualizer
+spring/stats
+framer/stats
 
 # Testing
 coverage

examples/typescript/package.json

@@ -9,9 +9,7 @@
     "cra-template-typescript": "^1.0.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-scripts": "^4.0.1",
-    "react-spring": "^8.0.27",
-    "react-spring-modal": "1.0.8"
+    "react-scripts": "^4.0.1"
   },
   "scripts": {
     "start": "react-scripts start",

spring/README.md

@@ -14,7 +14,7 @@ A component library for animatable and accessible modals built with react-spring
 
 ## Usage
 
-![Example usage of CenterModal, ModalTitle, and ModalCloseTarget to make a "confirmation" modal](assets/carbon.png)
+![Example usage of CenterModal, ModalTitle, and ModalCloseTarget to make a "confirmation" modal](/spring/assets/carbon.png)
 
 ### Installation
 
@@ -32,9 +32,7 @@ npm i react-spring-modal react react-dom react-spring
 
 ### Example
 
-<!-- TODO: update example after publishing -->
-
-You can [view comprehensive live examples on CodeSandbox.io](https://codesandbox.io/embed/react-spring-modalall-b3wp2?fontsize=14&hidenavigation=1&theme=dark)
+You can [view comprehensive live examples on CodeSandbox.io](https://codesandbox.io/s/react-spring-modalexamples-v2-lcjc5?file=/src/examples/Bottom.tsx)
 
 To use this package you'll need to choose a modal and import the CSS file. In our example, we'll be using `<BottomModal>` to animate it's HTML contents up from the bottom of the screen with a white background.
 

spring/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "react-spring-modal",
-  "version": "2.0.1",
+  "name": "@chrisbrownie55/react-spring-modal",
+  "version": "2.0.7",
   "description": "Animatable and accessible modals built with react-spring and @reach/dialog",
   "author": "Chris Brown <[email protected]> (https://chrisbrownie.dev)",
   "license": "MIT",
@@ -37,11 +37,10 @@
   },
   "types": "./dist/modern/index.d.ts",
   "files": [
-    "./dist",
-    "./styles.css",
-    "./src",
-    "./package.json",
-    "./README.md"
+    "dist",
+    "styles.css",
+    "src",
+    "assets"
   ],
   "scripts": {
     "emit": "",
@@ -59,20 +58,20 @@
     "@types/react-dom": "^17.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
-    "react-spring": "^8.0.27",
     "rollup": "^2.36.1",
     "rollup-plugin-css-only": "^3.1.0",
     "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-node-externals": "^2.2.0",
+    "rollup-plugin-visualizer": "^4.2.2",
     "typescript": "^4.2.0-beta"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0",
-    "react-spring": ">=8"
+    "react-dom": ">=16.8.0"
   },
   "dependencies": {
-    "@reach/auto-id": "^0.12.1",
-    "@reach/dialog": ">=0.12",
-    "react-focus-lock": "^2.5.0"
+    "@reach/auto-id": "^0.14.0",
+    "@reach/dialog": "^0.14.0",
+    "react-spring": "^8.0.21"
   }
 }

spring/rollup.config.js

@@ -1,6 +1,8 @@
 import typescript from 'typescript';
 import pluginTypeScript from '@rollup/plugin-typescript';
 import del from 'rollup-plugin-delete';
+import externals from 'rollup-plugin-node-externals';
+import visualize from 'rollup-plugin-visualizer';
 
 import tsConfig from './tsconfig.json';
 import pkg from './package.json';
@@ -49,8 +51,9 @@ function copyStyles() {
 export default [
   {
     input: pkg.source,
-    external: externalDependencies,
     plugins: [
+      externals({ deps: true }), // automatic externalization of dependencies
+      visualize({ filename: 'stats/commonjs.html' }), // creates a visualization of the bundle
       // so Rollup can convert TypeScript to JavaScript
       pluginTypeScript({ ...TypeScriptConfigs.legacy, declarationDir: './dist/commonjs/' }),
       copyStyles(), // so we can have CSS!
@@ -60,14 +63,20 @@ export default [
   },
   {
     input: pkg.source,
-    external: externalDependencies,
-    plugins: [pluginTypeScript({ ...TypeScriptConfigs.legacy, declarationDir: './dist/module/' })],
+    plugins: [
+      externals({ deps: true }),
+      visualize({ filename: 'stats/module.html' }),
+      pluginTypeScript({ ...TypeScriptConfigs.legacy, declarationDir: './dist/module/' })
+    ],
     output: { dir: './dist/module/', format: 'es', sourcemap: true }
   },
   {
     input: pkg.source,
-    external: externalDependencies,
-    plugins: [pluginTypeScript(TypeScriptConfigs.modern)],
+    plugins: [
+      visualize({ filename: 'stats/modern.html' }),
+      externals({ deps: true }),
+      pluginTypeScript(TypeScriptConfigs.modern)
+    ],
     output: { dir: './dist/modern/', format: 'es', sourcemap: true }
   }
 ];

spring/src/index.tsx

@@ -131,7 +131,7 @@ export function BaseModal({
         ...transitionConfig,
         onRest(isOpen: boolean, animationStatus: string) {
           if (typeof transitionConfig.onRest === 'function') {
-            transitionConfig.onRest(isOpen, animationStatus);
+            transitionConfig?.onRest(isOpen, animationStatus);
           }
           if (animationStatus === 'update') setStatus(isOpen ? 'focus-locked' : 'focus-unlocked'); // if done opening, lock focus. if done closing, unlock focus
         }