@thoughtbot/superglue 0.53.3 → 0.54.0

package/package.json

@@ -1,53 +1,91 @@
 {
   "name": "@thoughtbot/superglue",
-  "version": "0.53.3",
+  "version": "0.54.0",
   "description": "Use a vanilla Rails with React and Redux",
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "lint": "run-p lint:eslint lint:types lint:prettier",
+    "lint:eslint": "eslint --max-warnings=0 --ext js,jsx,ts,tsx ./lib",
+    "lint:prettier": "prettier --check '**/*' --ignore-unknown",
+    "lint:types": "tsc",
+    "fix:prettier": "prettier --write '**/*' --ignore-unknown",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "test:cov": "vitest --coverage",
+    "test:all": "npm lint && npm test:run",
+    "pub:beta": "npm build && npm publish --tag beta",
+    "pub:release": "npm build && npm publish"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/thoughtbot/superglue.git"
   },
   "author": "Johny Ho",
+  "main": "dist/cjs/superglue.cjs",
+  "module": "dist/superglue.mjs",
+  "types": "dist/superglue.d.mts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/superglue.d.mts",
+      "import": "./dist/superglue.mjs",
+      "default": "./dist/cjs/superglue.cjs"
+    },
+    "./action_creators": {
+      "types": "./dist/action_creators.d.mts",
+      "import": "./dist/action_creators.mjs",
+      "default": "./dist/cjs/action_creators.cjs"
+    }
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/thoughtbot/superglue/issues"
   },
   "homepage": "https://github.com/thoughtbot/superglue#readme",
   "devDependencies": {
-    "@babel/cli": "^7.14.3",
-    "@babel/core": "^7.14.3",
-    "@babel/preset-env": "^7.14.4",
-    "@babel/preset-react": "^7.13.13",
-    "core-js": "^2.6.12",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "eslint": "^7.28.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
+    "@reduxjs/toolkit": "^2.2.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.5.0",
+    "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/url-parse": "^1.4.11",
+    "@typescript-eslint/eslint-plugin": "^7.15.0",
+    "@typescript-eslint/parser": "^7.15.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/coverage-v8": "^2.0.2",
+    "abortcontroller-polyfill": "^1.7.3",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.3",
     "fetch-headers": "^2.0.0",
     "fetch-mock": "^9.11.0",
-    "history": "^5.3.0",
-    "jest": "^27.0.4",
+    "jsdom": "^24.1.0",
     "node-fetch": "^2.6.1",
+    "npm-run-all": "^4.1.5",
     "prettier": "^2.3.1",
-    "prop-types": "^15.7.2",
-    "react": "^16.4.0",
-    "react-dom": "^16.4.0",
+    "prettier-eslint": "^16.3.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-redux": "^7.2.4",
-    "redux": "^4.1.0",
+    "redux": "^5.0.1",
     "redux-mock-store": "^1.5.4",
-    "redux-thunk": "^2.3.0"
+    "redux-thunk": "^3.1.0",
+    "tsup": "^8.1.0",
+    "typedoc": "^0.26.5",
+    "typedoc-plugin-markdown": "^4.2.3",
+    "typedoc-plugin-missing-exports": "^3.0.0",
+    "typescript": "^5.5.3",
+    "vitest": "^2.0.2"
   },
   "peerDependencies": {
-    "history": "^5.3.0",
     "react": ">=16",
     "react-redux": ">=7.2",
     "redux": ">=4.1",
     "redux-thunk": ">=2.3"
   },
   "dependencies": {
-    "abortcontroller-polyfill": "^1.7.3",
-    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "history": "^5.3.0",
     "url-parse": "^1.5.1"
   }
 }

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "removeComments": true,
+    "moduleResolution": "Node",
+    "strict": true,
+    "strictPropertyInitialization": false,
+    "jsx": "react",
+    "allowJs": false,
+    "target": "ES2021",
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "noEmit": true
+  },
+  "include": ["./lib/**/*"]
+}

package/tsup.config.ts

@@ -0,0 +1,29 @@
+import type { Options } from 'tsup'
+import { defineConfig } from 'tsup'
+
+export default defineConfig((options) => {
+  const commonOptions: Partial<Options> = {
+    entry: {
+      superglue: 'lib/index.tsx',
+      action_creators: 'lib/action_creators/index.ts',
+    },
+    sourcemap: true,
+    ...options,
+  }
+
+  return [
+    {
+      ...commonOptions,
+      format: ['esm'],
+      outExtension: () => ({ js: '.mjs' }), // Add dts: '.d.ts' when egoist/tsup#1053 lands
+      dts: true,
+      clean: true,
+    },
+    {
+      ...commonOptions,
+      format: 'cjs',
+      outDir: './dist/cjs/',
+      outExtension: () => ({ js: '.cjs' }),
+    },
+  ]
+})

package/typedoc.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://typedoc-plugin-markdown.org/schema.json",
+  "plugin": ["typedoc-plugin-markdown"],
+  "entryPoints": [
+    "./lib/index.tsx",
+    "./lib/types/index.ts",
+    "./lib/types/requests.ts",
+    "./lib/components/Nav.tsx"
+  ],
+  "outputFileStrategy": "modules",
+  "flattenOutputFiles": true,
+  "readme": "none",
+  "expandParameters": true,
+  "expandObjects": true,
+  "hidePageTitle": true,
+  "sort": ["source-order", "external-last"],
+  "hidePageHeader": true,
+  "hideBreadcrumbs": true,
+  "indexFormat": "table",
+  "parametersFormat": "table",
+  "interfacePropertiesFormat": "table",
+  "classPropertiesFormat": "table",
+  "enumMembersFormat": "table",
+  "typeDeclarationFormat": "table",
+  "propertyMembersFormat": "table",
+  "excludeExternals": true,
+  "excludeInternal": true,
+  "useHTMLAnchors": true,
+  "out": "../docs/reference"
+}

package/README.md

@@ -1,126 +0,0 @@
-<div align="center" style="padding: 30px 0px 20px 0px;">
-  <img src="https://thoughtbot.github.io/superglue/images/superglue.svg" data-origin="images/superglue.svg" alt="Logo" width=250>
-</div>
-
-# Superglue
-
-Use classic Rails to build rich React Redux applications with **NO APIs** and
-**NO client-side routing**.
-
-[![Test superglue_js](https://github.com/thoughtbot/superglue/actions/workflows/build_js.yml/badge.svg)](https://github.com/thoughtbot/superglue/actions/workflows/build_js.yml)
-[![Test superglue_rails](https://github.com/thoughtbot/superglue/actions/workflows/build_rails.yml/badge.svg)](https://github.com/thoughtbot/superglue/actions/workflows/build_rails.yml)
-
-Superglue makes React and Redux as productive as Hotwire, Turbo and Stimulus.
-Its inspired by Turbolinks and designed to feel like a natural extension of
-Rails. Enjoy the benefits of Redux state management and React components
-without giving up the productivity of Rails form helpers, UJS, tag helpers,
-flash, cookie auth, and more.
-
-## Caution
-
-This project is in its early phases of development. Its interface, behavior,
-and name are likely to change drastically before a major version release.
-
-### No APIs
-
-Instead of APIs, Superglue leans on Rail's ability to respond to different
-[mime types](https://apidock.com/rails/ActionController/MimeResponds/InstanceMethods/respond_to)
-on the same route. In a Superglue application, if you direct your browser to
-`/dashboard.html`, you would see the HTML version of the content, and if you
-went to `/dashboard.json` you would see the JSON version of the exact same
-content down to the footer.
-
-The end result would be something like this:
-
-![No Apis](https://thoughtbot.github.io/superglue/images/no_apis.png)
-
-### Powered by Classic Rails
-Superglue leans on Rails. Features like the flash, cookie auth, and URL
-helpers continue to be useful. Here's a look at the directory structure of a
-typical Rails application with Superglue.
-
-```treeview
-app/
-|-- controllers/
-|-- views/
-|   |-- dashboard/
-|   |   |-- index.js # The React page component
-|   |   |-- index.json.props # The json for the page component
-|   |   |-- index.html.erb
-```
-
-### PropsTemplate
-Powering the JSON responses is PropsTemplate, a digable JSON templating DSL
-inspired by JBuilder. With PropsTemplate you can specify a path of the node you
-want, and PropsTemplate will walk the tree to it, skipping the execution of nodes
-that don't match the keypath.
-
-![No Apis](https://thoughtbot.github.io/superglue/images/props_template.png)
-
-### All together now!
-Superglue comes with batteries that bring all the above concepts together to make
-building popular SPA features easy, painless, and productive.
-
-#### SPA Navigation
-A popular ask of SPAs is page-to-page navigation without reloading. This is
-easily done with Superglue's own UJS attributes inspired by Turbolinks:
-
-```jsx
-  <a href='/posts' data-sg-visit />
-```
-
-The above will request for `/posts` with an `accept` of `application/json`, and
-when the client receives the response, swap out the current component for the
-component the response asks for, and `pushState` on history.
-
-
-#### Easy Partial updates
-Some features rely on updating some parts of the existing page. Imagine
-implementing type-ahead search. In traditional applications, you may need a new
-controller, routes, a discussion over versioning, JSON serializer, plenty of
-new JS code, etc.
-
-![haircuts](https://thoughtbot.github.io/superglue/images/haircuts.png)
-
-With Superglue, this can be done with a simple `onChange`
-
-```js
-const onChange = (e) => (
-  remote(`/dashboard?qry=${e.target.value}&props_at=data.header.search`)}
-)
-```
-
-?> `remote` and `visit` is a thunk [passed] to every page component.
-
-  [passed]: ./navigation.md
-
-With `props_at`, the above will make a request to `/dashboard?qry=haircut`,
-dig your template for the `data.header.search` node, return it in the response,
-and immutably graft it in the exact same path on the redux store before finally
-letting React re-render.
-
-For more on what you can do, check out our documentation.
-
-#### Server-Side Rendering
-Server-Side Rendering is supported via [Humid](https://github.com/thoughtbot/humid).
-See the [documentation for server-side rendering][ssr docs].
-
-  [ssr docs]: ./recipes/server-side-rendering.md
-
-## Documentation
-
-Documentation is hosted on [Github pages](https://thoughtbot.github.io/superglue).
-
-## Contributing
-
-Thank you, [contributors]!
-
-  [contributors]: https://github.com/thoughtbot/superglue/graphs/contributors
-
-## Special Thanks
-
-Thanks to [jbuilder](https://github.com/rails/jbuilder),
-[scour](https://github.com/rstacruz/scour),
-[turbolinks3](https://github.com/turbolinks/turbolinks-classic),
-[turbograft](https://github.com/Shopify/turbograft/),
-[turbostreamer](https://github.com/malomalo/turbostreamer)

package/action_creators/index.js

@@ -1,160 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-var _exportNames = {
-  copyPage: true,
-  saveResponse: true,
-  handleGraft: true,
-  saveAndProcessPage: true
-};
-exports.copyPage = copyPage;
-exports.handleGraft = handleGraft;
-exports.saveAndProcessPage = saveAndProcessPage;
-exports.saveResponse = saveResponse;
-
-var _utils = require("../utils");
-
-var _urlParse = _interopRequireDefault(require("url-parse"));
-
-var _actions = require("../actions");
-
-var _requests = require("./requests");
-
-Object.keys(_requests).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _requests[key]) return;
-  exports[key] = _requests[key];
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function copyPage(_ref) {
-  var from = _ref.from,
-      to = _ref.to;
-  return {
-    type: _actions.COPY_PAGE,
-    payload: {
-      from: from,
-      to: to
-    }
-  };
-}
-
-function saveResponse(_ref2) {
-  var pageKey = _ref2.pageKey,
-      page = _ref2.page;
-  pageKey = (0, _utils.urlToPageKey)(pageKey);
-  return {
-    type: _actions.SAVE_RESPONSE,
-    payload: {
-      pageKey: pageKey,
-      page: page
-    }
-  };
-}
-
-function handleGraft(_ref3) {
-  var pageKey = _ref3.pageKey,
-      page = _ref3.page;
-  pageKey = (0, _utils.urlToPageKey)(pageKey);
-  return {
-    type: _actions.HANDLE_GRAFT,
-    payload: {
-      pageKey: pageKey,
-      page: page
-    }
-  };
-}
-
-function fetchDeferments(pageKey, defers) {
-  if (defers === void 0) {
-    defers = [];
-  }
-
-  pageKey = (0, _utils.urlToPageKey)(pageKey);
-  return function (dispatch) {
-    var fetches = defers.filter(function (_ref4) {
-      var type = _ref4.type;
-      return type === 'auto';
-    }).map(function (_ref5) {
-      var url = _ref5.url,
-          _ref5$successAction = _ref5.successAction,
-          successAction = _ref5$successAction === void 0 ? _actions.GRAFTING_SUCCESS : _ref5$successAction,
-          _ref5$failAction = _ref5.failAction,
-          failAction = _ref5$failAction === void 0 ? _actions.GRAFTING_ERROR : _ref5$failAction;
-      var parsedUrl = new _urlParse["default"](url, true);
-      var keyPath = parsedUrl.query.props_at;
-      return dispatch((0, _requests.remote)(url, {
-        pageKey: pageKey
-      })).then(function () {
-        dispatch({
-          type: successAction,
-          payload: {
-            pageKey: pageKey,
-            keyPath: keyPath
-          }
-        });
-      })["catch"](function (err) {
-        dispatch({
-          type: failAction,
-          payload: {
-            url: url,
-            err: err,
-            pageKey: pageKey,
-            keyPath: keyPath
-          }
-        });
-      });
-    });
-    return Promise.all(fetches);
-  };
-}
-
-function updateFragmentsUsing(page) {
-  var changedFragments = {};
-  page.fragments.forEach(function (fragment) {
-    var type = fragment.type,
-        path = fragment.path;
-    changedFragments[type] = (0, _utils.getIn)(page, path);
-  });
-  return {
-    type: _actions.UPDATE_FRAGMENTS,
-    payload: {
-      changedFragments: changedFragments
-    }
-  };
-}
-
-function saveAndProcessPage(pageKey, page) {
-  return function (dispatch, getState) {
-    pageKey = (0, _utils.urlToPageKey)(pageKey);
-    var _page$defers = page.defers,
-        defers = _page$defers === void 0 ? [] : _page$defers;
-
-    if ((0, _utils.isGraft)(page)) {
-      dispatch(handleGraft({
-        pageKey: pageKey,
-        page: page
-      }));
-    } else {
-      dispatch(saveResponse({
-        pageKey: pageKey,
-        page: page
-      }));
-    }
-
-    var hasFetch = typeof fetch != 'undefined';
-
-    if (hasFetch) {
-      return dispatch(fetchDeferments(pageKey, defers)).then(function () {
-        if (page.fragments.length > 0) {
-          var finishedPage = getState().pages[pageKey];
-          return dispatch(updateFragmentsUsing(finishedPage));
-        }
-      });
-    } else {
-      return Promise.resolve();
-    }
-  };
-}