@wishy-gift/noscript

Table of Contents

- About
- Installation
- Important note
- Examples
- Components
- Form
- Including
- Props
- Example
- Button
- Including
- Props
- Example
- Utils
- handleServerActions
- Including
- Parameters
- Example
- actionCreators
- Including
- Parameters
- Example
- usePayloadProxy
- Including
- Parameters
- Example
- License

About

A small collection of utils and React components to assist in developing web applications that seamlessly work without JavaScript enabled on the client.

In 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.

Instead 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.

More details on this can be found in "Using React, Redux and SSR to acommodate users without JavaScript", or this talk from React Advanced 2021 (soon™)

Installation

``cli
npm i @wishy-gift/noscript
`

Important note

For 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.

Examples

- \_app.js for use with Next.js
- TodoMVC à la @wishy-gift/noscript
- Counter
- Normal
- Noscript + createAsyncThunk
- Epic Gutenberg
- Uses createAsyncThunk with a 3rd-party API (Gutendex)

Components

$3

Will 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.

#### Including

`js
import Form from '@wishy-gift/noscript/dist/components/Form';
`

#### Props

`ts
interface FormProps {
actionType?: string; // type to dispatch
actionCreator?: string | Function; // function or name of function. see section about actionCreators below
children: ReactNode;
className?: string;
onSubmit?: Function; // optional function to call on submit. NOTE: Actions are dispatched for you
payloadType?: 'string' | 'object' | 'json'; // default is 'object' which means you can use array notation like payload[foo][bar]
}
`

Note: 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:

`jsx

`

#### Example

`jsx
className="new-todo-wrapper"
actionType={addTodo().type}
onSubmit={resetOnSubmit}
>
className="new-todo"
name="payload[text]"
placeholder="What needs to be done?"
autoFocus
/>


`

$3

A simple wrapper for Form with a as child and payloadType="json".

#### Including

`js
import Button from '@wishy-gift/noscript/dist/components/Button';
`

#### Props

`ts
interface ButtonProps {
wrapperClassName?: string; // className to


wrapperParams?: object; // spread to
className?: string; // className for


action?: {
type: string;
payload?: any; // will be stringifed and rendered to DOM if payload isn't provided
};
actionCreator?: string | Function; // function or name of function. see section about actionCreators below
payload?: any; // will be stringifed and rendered to DOM if provided
children: ReactNode;
onSubmit?: Function; // optional function to call on submit. NOTE: Actions are dispatched for you
}
`

Note: As with Form, you cannot specify both action AND actionCreator.

#### Example

`jsx
className="btn"
actionCreator={fetchBooks}
disabled={!nextUrl}
payload={{
url: nextUrl,
}}
>
Next page



`

Utils

$3

Given 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.

Returns a Promise that resolves with {reduxStore, state}

#### Including

`js
import handleServerActions from '@wishy-gift/noscript/dist/utils/handleServerActions';
`

#### Parameters

`ts
type HandleServerActionsParams = {
data: Data; // one of these must be provided
rawBody: string; // one of these must be provided
getReduxStore: (state: any) => ReturnType;
};

type Data = {
actionType?: string;
actionCreatorName?: string;
payloadType: 'string' | 'object' | 'json';
state?: string;
payload?: any;
};
`

#### Example

`js
const rawBody = req.read().toString();
// const data = qs.parse(rawBody);

const result = await handleServerActions({
rawBody,
// data, // if pre-parsed
getReduxStore: (state) => {
return getStore(state, isServer);
},
});

const { reduxStore, state } = result;
`

$3

Helpers 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.

#### Including

`js
import { addActionCreators } from '@wishy-gift/noscript/dist/utils/actionCreators';
`

#### Parameters

`ts
// Basically the signature of an AsyncThunk created with createAsyncThunk
type SimpleActionCreator = Function & {
typePrefix?: string;
};
`

#### Example

`js
// _app.js

import { fetchBooks } from './gutenberg/gutenbergSlice';
import { incrementBySurprise } from './counter/counterSlice';

addActionCreators({ fetchBooks, incrementBySurprise });
`

$3

A hook that returns a Proxy to easier provide the corect array notation to the name attribute of form elements by simply accessing the proxy.

#### Including

`js
import usePayloadProxy from '@wishy-gift/noscript/dist/hooks/usePayloadProxy';
`

#### Parameters

`ts
varName?: string; // defaults to 'payload'
`

#### Example

`js
const MyInput = () => {
const payloadProxy = usePayloadProxy('payload'); // 'payload' is default

return ;
};
`

will render

`html

``

License

See LICENSE