{"id":22425061,"url":"https://github.com/wishy-gift/noscript","last_synced_at":"2025-03-27T06:14:38.410Z","repository":{"id":57154948,"uuid":"404651398","full_name":"wishy-gift/noscript","owner":"wishy-gift","description":"Some utils for working with noscript-support in react and redux","archived":false,"fork":false,"pushed_at":"2022-01-06T09:39:25.000Z","size":702,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-22T21:36:05.343Z","etag":null,"topics":["nextjs","noscript","react","redux"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wishy-gift.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-09-09T08:52:58.000Z","updated_at":"2024-04-08T10:13:02.000Z","dependencies_parsed_at":"2022-09-06T20:12:56.960Z","dependency_job_id":null,"html_url":"https://github.com/wishy-gift/noscript","commit_stats":null,"previous_names":[],"tags_count":14,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wishy-gift%2Fnoscript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wishy-gift%2Fnoscript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wishy-gift%2Fnoscript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wishy-gift%2Fnoscript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wishy-gift","download_url":"https://codeload.github.com/wishy-gift/noscript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245791967,"owners_count":20672671,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["nextjs","noscript","react","redux"],"created_at":"2024-12-05T19:12:51.599Z","updated_at":"2025-03-27T06:14:38.391Z","avatar_url":"https://github.com/wishy-gift.png","language":"TypeScript","readme":"[![npm](https://img.shields.io/npm/v/@wishy-gift/noscript)](https://www.npmjs.com/package/@wishy-gift/noscript)\n[![npm](https://img.shields.io/npm/dw/@wishy-gift/noscript)](https://www.npmjs.com/package/@wishy-gift/noscript)\n\n# @wishy-gift/noscript\n\n## Table of Contents\n\n- [About](#about)\n- [Installation](#installation)\n- [Important note](#important-note)\n- [Examples](#examples)\n- [Components](#components)\n  - [Form](#form)\n    - [Including](#including)\n    - [Props](#props)\n    - [Example](#example)\n  - [Button](#button)\n    - [Including](#including-1)\n    - [Props](#props-1)\n    - [Example](#example-1)\n- [Utils](#utils)\n  - [handleServerActions](#handleserveractions)\n    - [Including](#including-2)\n    - [Parameters](#parameters)\n    - [Example](#example-2)\n  - [actionCreators](#actioncreators)\n    - [Including](#including-3)\n    - [Parameters](#parameters-1)\n    - [Example](#example-3)\n  - [usePayloadProxy](#usepayloadproxy)\n    - [Including](#including-4)\n    - [Parameters](#parameters-2)\n    - [Example](#example-4)\n- [License](#license)\n\n## About\n\nA small collection of utils and React components to assist in developing web applications that seamlessly work without JavaScript enabled on the client.\n\nIn short, by leveraging the similarities of form events and an event based state container like Redux, we can dispatch and update client/app state on the server side for users without JS enabled, by making all essential actions go through forms.\n\nInstead of directly dispatching actions, we serialize the action type/creator and payload in the form body itself. The helpers in this package is meant to make this task easier.\n\nMore details on this can be found in [\"Using React, Redux and SSR to acommodate users without JavaScript\"](https://blog.klungo.no/2020/05/28/using-react-and-redux-to-acommodate-users-without-javascript/), or [this talk from React Advanced 2021](https://youtu.be/3yY-Z-X3xE4?t=19).\n\n## Installation\n\n```cli\nnpm i @wishy-gift/noscript\n```\n\n## Important note\n\nFor these components to be of any use, you should be listening for `POST` requests towards your view routes. One of the basic assumptions we make, is that the only reason why someone would do a POST-request to a view route is because they've disabled JS, and an action has been dispatched. This way we know when to update the client state for our users server-side, and re-render the page.\n\n## Examples\n\n- [\\_app.js](examples/_app.js) for use with Next.js\n- [TodoMVC](examples/todos) à la @wishy-gift/noscript\n- [Counter](examples/counter)\n  - [Normal](examples/counter/counter-initial.js)\n  - [Noscript](examples/counter/counter-result.js) + `createAsyncThunk`\n- [Epic Gutenberg](examples/gutenberg)\n  - Uses `createAsyncThunk` with a 3rd-party API ([Gutendex](https://github.com/garethbjohnson/gutendex))\n\n## Components\n\n### Form\n\nWill serialize the app state to the DOM, and handle client side state updates by calling `preventDefault` when the form is submitted, parse the form data, and dispatch the correct action/actionCreator.\n\n#### Including\n\n```js\nimport Form from '@wishy-gift/noscript/dist/components/Form';\n```\n\n#### Props\n\n```ts\ninterface FormProps {\n  actionType?: string; // `type` to dispatch\n  actionCreator?: string | Function; // function or name of function. see section about actionCreators below\n  children: ReactNode;\n  className?: string;\n  onSubmit?: Function; // optional function to call on submit. NOTE: Actions are dispatched for you\n  payloadType?: 'string' | 'object' | 'json'; // default is 'object' which means you can use array notation like payload[foo][bar]\n}\n```\n\nNote: You cannot specify both `actionType` AND `actionCreator`, but you can also omit passing any of them as props, instead opting to render it to the DOM like this:\n\n```jsx\n\u003cinput name=\"actionType\" value={someAction().type} type=\"hidden\" readOnly /\u003e\n```\n\n#### Example\n\n```jsx\n\u003cForm\n  className=\"new-todo-wrapper\"\n  actionType={addTodo().type}\n  onSubmit={resetOnSubmit}\n\u003e\n  \u003cinput\n    className=\"new-todo\"\n    name=\"payload[text]\"\n    placeholder=\"What needs to be done?\"\n    autoFocus\n  /\u003e\n  \u003cinput type=\"hidden\" name=\"payload[id]\" value={nanoid()} /\u003e\n\u003c/Form\u003e\n```\n\n### Button\n\nA simple wrapper for `Form` with a `\u003cbutton\u003e` as child and `payloadType=\"json\"`.\n\n#### Including\n\n```js\nimport Button from '@wishy-gift/noscript/dist/components/Button';\n```\n\n#### Props\n\n```ts\ninterface ButtonProps {\n  wrapperClassName?: string; // className to \u003cForm\u003e\n  wrapperParams?: object; // spread to \u003cForm\u003e\n  className?: string; // className for \u003cbutton\u003e\n  action?: {\n    type: string;\n    payload?: any; // will be stringifed and rendered to DOM if `payload` isn't provided\n  };\n  actionCreator?: string | Function; // function or name of function. see section about actionCreators below\n  payload?: any; // will be stringifed and rendered to DOM if provided\n  children: ReactNode;\n  onSubmit?: Function; // optional function to call on submit. NOTE: Actions are dispatched for you\n}\n```\n\nNote: As with `Form`, you cannot specify both `action` AND `actionCreator`.\n\n#### Example\n\n```jsx\n\u003cButton\n  className=\"btn\"\n  actionCreator={fetchBooks}\n  disabled={!nextUrl}\n  payload={{\n    url: nextUrl,\n  }}\n\u003e\n  Next page\n\u003c/Button\u003e\n```\n\n## Utils\n\n### handleServerActions\n\nGiven a body and a callback for getting a Redux store given an initial state, will get the store, dispatch any action/actionCreator in body, and return the store and its updated state.\n\nReturns a `Promise` that resolves with `{reduxStore, state}`\n\n#### Including\n\n```js\nimport handleServerActions from '@wishy-gift/noscript/dist/utils/handleServerActions';\n```\n\n#### Parameters\n\n```ts\ntype HandleServerActionsParams = {\n  data: Data; // one of these must be provided\n  rawBody: string; // one of these must be provided\n  getReduxStore: (state: any) =\u003e ReturnType\u003ctypeof configureStore\u003e;\n};\n\ntype Data = {\n  actionType?: string;\n  actionCreatorName?: string;\n  payloadType: 'string' | 'object' | 'json';\n  state?: string;\n  payload?: any;\n};\n```\n\n#### Example\n\n```js\nconst rawBody = req.read().toString();\n// const data = qs.parse(rawBody);\n\nconst result = await handleServerActions({\n  rawBody,\n  // data, // if pre-parsed\n  getReduxStore: (state) =\u003e {\n    return getStore(state, isServer);\n  },\n});\n\nconst { reduxStore, state } = result;\n```\n\n### actionCreators\n\nHelpers for mapping `actionCreators` to their `typePrefix` and vice-versa. Specifically made to be compatible with `thunks` created with `createAsyncThunk`. Should be run once, eg. in `_app.js` for Next.js projects.\n\n#### Including\n\n```js\nimport { addActionCreators } from '@wishy-gift/noscript/dist/utils/actionCreators';\n```\n\n#### Parameters\n\n```ts\n// Basically the signature of an `AsyncThunk` created with `createAsyncThunk`\ntype SimpleActionCreator = Function \u0026 {\n  typePrefix?: string;\n};\n```\n\n#### Example\n\n```js\n// _app.js\n\nimport { fetchBooks } from './gutenberg/gutenbergSlice';\nimport { incrementBySurprise } from './counter/counterSlice';\n\naddActionCreators({ fetchBooks, incrementBySurprise });\n```\n\n### usePayloadProxy\n\nA hook that returns a `Proxy` to easier provide the corect array notation to the `name` attribute of form elements by simply accessing the proxy.\n\n#### Including\n\n```js\nimport usePayloadProxy from '@wishy-gift/noscript/dist/hooks/usePayloadProxy';\n```\n\n#### Parameters\n\n```ts\nvarName?: string; // defaults to 'payload'\n```\n\n#### Example\n\n```js\nconst MyInput = () =\u003e {\n  const payloadProxy = usePayloadProxy('payload'); // 'payload' is default\n\n  return \u003cinput name={payloadProxy.foo.bar} value=\"baz\" type=\"text\" /\u003e;\n};\n```\n\nwill render\n\n```html\n\u003cinput name=\"payload[foo][bar]\" value=\"baz\" type=\"text\" /\u003e\n```\n\n## License\n\nSee [LICENSE](LICENSE)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwishy-gift%2Fnoscript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwishy-gift%2Fnoscript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwishy-gift%2Fnoscript/lists"}