├── .gitignore
├── .prettierrc
├── CHANGELOG.md
├── README.md
├── package.json
├── playground
├── index.html
├── index.tsx
├── package.json
├── pnpm-lock.yaml
└── vite.config.ts
├── pnpm-lock.yaml
├── rollup.config.js
├── src
├── createApp.tsx
├── createGlobalSignal.tsx
├── createGlobalState.tsx
├── createStore.tsx
└── index.tsx
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "semi": true,
3 | "tabWidth": 2,
4 | "useTabs": false,
5 | "printWidth": 100,
6 | "singleQuote": true,
7 | "trailingComma": "all",
8 | "htmlWhitespaceSensitivity": "ignore"
9 | }
10 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Changelog
2 |
3 | setState('count', c => c + 1)}>{state.count}
79 |
80 | const App = () => {
81 | return <>
82 |
85 | The current value of count is: {state.count}
86 | I can increment setState('count', c => c + 1)}>here
87 | or within my `Counter` component.
88 |
89 |
90 | }
91 |
92 | render(App, document.getElementById('app'))
93 | ```
94 |
95 | ### createGlobalSignal
96 |
97 | A wrapper around `createSignal` that allows you to declare it at the global level.
98 | This essentially work by being managed in its own reactive context, removing the needs to be within your application.
99 |
100 | Although this can be useful and seem to be the better approach, there's a reason this wasn't part of core.
101 | This should act as an escape hatch for those who migrate from more permissive libraries such as `react`, `vue` or `svelte`.
102 |
103 | This accept the exact same parameters than `createSignal` from `solid-js`.
104 |
105 | #### Basic usage
106 |
107 | ```tsx
108 | import { createGlobalSignal } from 'solid-utils';
109 |
110 | const [count, setCount] = createGlobalSignal(0)
111 |
112 | const Counter = () => setCount(count() + 1)}>{count()}
113 |
114 | const App = () => {
115 | return <>
116 |
119 | The current value of count is: {count()}
120 | I can increment setCount(count() + 1)}>here
121 | or within my `Counter` component.
122 |
123 |
124 | }
125 |
126 | render(App, document.getElementById('app'))
127 | ```
128 |
129 | ### createApp
130 |
131 | A Vue 3 inspired app mounting bootstrapper that helps manage large list of global providers
132 |
133 | #### Basic usage
134 |
135 | ```tsx
136 | import { createApp } from 'solid-utils'
137 |
138 | const App = () => Hello world!
139 |
140 | createApp(App).mount('#app')
141 | ```
142 |
143 | #### With providers
144 |
145 | ```tsx
146 | const app = createApp(App)
147 |
148 | app.use(RouterProvider)
149 | app.use(I18nProvider, { dict })
150 | app.use(GlobalStoreProvider)
151 |
152 | app.mount('#app')
153 |
154 | // [new in 0.0.4] - Those are also chainable
155 | createApp(App)
156 | .use(RouterProvider)
157 | .use(I18nProvider, { dict })
158 | .use(GlobalStoreProvider)
159 | .mount('#app')
160 | ```
161 |
162 | into something like that:
163 |
164 | ```tsx
165 | render(
166 |
167 |
168 |
169 |
171 |
172 | ,
173 | document.querySelector('#app')
174 | )
175 | ```
176 |
177 | #### With disposable app
178 |
179 | Can be useful in tests or HMR
180 |
181 | ```tsx
182 | const dispose = createApp(App).mount('#app')
183 |
184 | if (module.hot) {
185 | module.hot.accept()
186 | module.hot.dispose(dispose)
187 | }
188 | ```
189 |
190 | ### createStore
191 |
192 | A small utility that helps generate Provider & associated hook
193 |
194 | #### Basic usage
195 |
196 | ```tsx
197 | const [Provider, useProvider] = createStore({
198 | state: () => ({ count: 0, first: 'Alexandre' }),
199 |
200 | actions: (set, get) => ({
201 | increment(by = 1) {
202 | set('count', count => count + 1)
203 | },
204 | dynamicFullName(last) {
205 | return `${get.first} ${last} ${get.count}`;
206 | }
207 | })
208 | })
209 |
210 | const Counter = () => {
211 | const [state, { increment, dynamicFullName }] = useProvider()
212 |
213 | // The count here will be synced between the two {state.count}
216 | {dynamicFullName('Mouton-Brady')}
217 |
218 | }
219 |
220 | render(
221 | () =>
222 |
223 | ,
226 | document.getElementById('app'),
227 | )
228 | ```
229 |
230 | #### With default props
231 |
232 | ```tsx
233 | const [Provider, useProvider] = createStore({
234 | state: (props) => ({ count: props.count, first: 'Alexandre' }),
235 |
236 | actions: (set, get) => ({
237 | increment(by = 1) {
238 | set('count', count => count + 1)
239 | },
240 | dynamicFullName(last) {
241 | return `${get.first} ${last} ${get.count}`;
242 | }
243 | })
244 |
245 | props: { count: 1 }, // This will auto type the props above and the component props
246 | })
247 |
248 | const Counter = () => {
249 | const [state, { increment, dynamicFullName }] = useProvider()
250 |
251 | // The count here will be synced between the two {state.count}
254 | {dynamicFullName('Mouton-Brady')}
255 |
256 | }
257 |
258 | render(
259 | () => (
260 | // This `count` will be auto typed
261 |
262 | ,
265 | document.getElementById('app'),
266 | )
267 | )
268 | ```
269 |
270 | #### With async default props
271 |
272 | ```tsx
273 | const [Provider, useProvider] = createStore({
274 | props: { url: 'https://get-counter.com/json' }, // This will auto type the props above and the component props
275 |
276 | state: async (props) => {
277 | const count = await fetch(props.url).then(r => r.json())
278 |
279 | return { count, first: 'Alexandre' },
280 | },
281 |
282 | actions: (set, get) => ({
283 | increment(by = 1) {
284 | set('count', count => count + 1)
285 | },
286 | dynamicFullName(last) {
287 | return `${get.first} ${last} ${get.count}`;
288 | }
289 | }),
290 | })
291 |
292 | const Counter = () => {
293 | const [state, { increment, dynamicFullName }] = useProvider()
294 |
295 | // The count here will be synced between the two {state.count}
298 | {dynamicFullName('Mouton-Brady')}
299 |
300 | }
301 |
302 | render(
303 | () => (
304 | // This `count` will be auto typed
305 | Loading...}>
306 | ,
309 | document.getElementById('app'),
310 | )
311 | )
312 | ```
313 |
314 | #### With props
315 |
316 | Not setting the third parameters prevent typescript to infer the proper types for the props interface in the first function and the `` component returned by the `createStore`.
317 |
318 | If any Typescript ninja come accross this I'd be more than happy to know the right way to do that...
319 |
320 | ```tsx
321 | const [Provider, useProvider] = createStore<{ count: number }>({
322 | state: (props) => ({ count: props.count, first: 'Alexandre' }),
323 |
324 | actions: (set, get) => ({
325 | increment(by = 1) {
326 | set('count', count => count + 1)
327 | },
328 | dynamicFullName(last) {
329 | return `${get.first} ${last} ${get.count}`;
330 | }
331 | })
332 | })
333 |
334 | const Counter = () => {
335 | const [state, { increment, dynamicFullName }] = useProvider()
336 |
337 | // The count here will be synced between the two {state.count}
340 | {dynamicFullName('Mouton-Brady')}
341 |
342 | }
343 |
344 | render(
345 | () => (
346 | // This `count` props won't be typed...
347 |
348 | ,
351 | document.getElementById('app')
352 | ),
353 | )
354 | ```
355 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "solid-utils",
3 | "version": "0.8.1",
4 | "description": "Your best companion for any solid project",
5 | "main": "./dist/cjs/index.js",
6 | "module": "./dist/esm/index.js",
7 | "exports": {
8 | ".": {
9 | "solid": "./dist/source/index.jsx",
10 | "import": "./dist/esm/index.js",
11 | "browser": "./dist/esm/index.js"
12 | }
13 | },
14 | "types": "./dist/types/index.d.ts",
15 | "repository": {
16 | "type": "git",
17 | "url": "https://github.com/amoutonbrady/solid-utils"
18 | },
19 | "scripts": {
20 | "build": "rollup -c",
21 | "format": "prettier -w \"**/*.{js,ts,tsx,json}\"",
22 | "check": "pnpx @skypack/package-check",
23 | "prepublishOnly": "pnpm check && pnpm build",
24 | "changelog": "pnpx gitmoji-changelog"
25 | },
26 | "files": [
27 | "dist"
28 | ],
29 | "keywords": [
30 | "solid-js",
31 | "utils",
32 | "companion"
33 | ],
34 | "author": "Alexandre Mouton-Brady",
35 | "license": "MIT",
36 | "devDependencies": {
37 | "babel-preset-solid": "^1.0.0",
38 | "prettier": "^2.3.2",
39 | "rollup": "^2.52.3",
40 | "rollup-preset-solid": "^0.3.0",
41 | "solid-js": "^1.0.0"
42 | },
43 | "peerDependencies": {
44 | "solid-js": ">= 1.0"
45 | }
46 | }
47 |
--------------------------------------------------------------------------------
/playground/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/playground/index.tsx:
--------------------------------------------------------------------------------
1 | import { createApp, createStore, createGlobalState, createGlobalSignal } from 'solid-utils';
2 |
3 | import { Router, Route } from 'solid-app-router';
4 | import { Meta, MetaProvider, Title } from 'solid-meta';
5 |
6 | const [globalState, setGlobalState] = createGlobalState({ name: 'Alexandre' });
7 | const [globalSignal, setGlobalSignal] = createGlobalSignal(20);
8 |
9 | const [Provider, useProvider] = createStore({
10 | state: (props) => ({ count: props.count }),
11 | actions: (set) => ({
12 | inc: () => set('count', (c) => c + 1),
13 | }),
14 | effects: (_set, get) => [() => console.log(get.count)],
15 | props: { count: 0 },
16 | });
17 |
18 | const Name = () => Watch me also change name here: {globalState.name} ;
19 |
20 | const Hoooome = () => {
21 | const [state, actions] = useProvider();
22 |
23 | return (
24 | <>
25 | Hello world!
26 |
27 |
28 | My name is: {globalState.name} and I'm: {globalSignal()}
29 |
30 |
31 | {
35 | setGlobalState('name', (name) => (name === 'Alexandre' ? 'Alex' : 'Alexandre'));
36 | setGlobalSignal(globalSignal() === 20 ? 22 : 20);
37 | }}
38 | >
39 | Toggle name between 'Alex' and 'Alexandre' and my age between '22' and '20'
40 |
41 |
42 |
45 | Count from provider:{state.count} (open the console to see the effect)
46 |
47 |
48 | );
49 | };
50 |
51 | const App = () => (
52 | <>
53 | } - The optional options
11 | */
12 | use(provider: Component, options?: Props): App;
13 |
14 | /**
15 | * It first merges all the Providers and then uses the `render` function
16 | * to mount the application.
17 | *
18 | * @param dom {HTMLElement | string} - The element to mount your app on
19 | */
20 | mount(domElement: HTMLElement | string): ReturnType;
21 | }
22 |
23 | interface Provider {
24 | provider: Component;
25 | opts?: Record;
26 | }
27 |
28 | interface MergeParams {
29 | app: (props?: Record) => JSX.Element;
30 | props: Record;
31 | providers: Provider[];
32 | }
33 |
34 | /**
35 | * This utils function automatically merge the provider in the order they
36 | * were provided. It turns the following calls:
37 | *
38 | * const app = createApp(App)
39 | *
40 | * app.use(RouterProvider)
41 | * app.use(I18nProvider, { dict })
42 | * app.use(GlobalStoreProvider)
43 | *
44 | * app.mount('#app')
45 | *
46 | * into something like that:
47 | *
48 | * render(
49 | *
50 | *
51 | *
52 | *
54 | *
55 | * ,
56 | * document.querySelector('#app')
57 | * )
58 | */
59 | function mergeProviders({ app, props = {}, providers }: MergeParams) {
60 | return providers.reduceRight(
61 | (application, { provider, opts = {} }) => () =>
62 | component(provider, {
63 | ...opts,
64 |
65 | get children() {
66 | return application();
67 | },
68 | }),
69 | () => component(app, props),
70 | );
71 | }
72 |
73 | export function createApp(app: (props?: AppProps) => JSX.Element, props?: AppProps) {
74 | const providers: Provider[] = [];
75 |
76 | const _app: App = {
77 | use(provider, opts = {} as any) {
78 | providers.push({ provider, opts });
79 | return _app;
80 | },
81 |
82 | mount(dom) {
83 | const application = mergeProviders({ app, props, providers });
84 | const root = typeof dom === 'string' ? document.querySelector(dom) : dom;
85 | return render(application, root);
86 | },
87 | };
88 |
89 | return _app;
90 | }
91 |
--------------------------------------------------------------------------------
/src/createGlobalSignal.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot, createSignal } from 'solid-js';
2 |
3 | interface Options {
4 | name?: string;
5 | internal?: boolean;
6 | }
7 |
8 | type AreEqual = boolean | ((prev: TState, next: TState) => boolean);
9 |
10 | /**
11 | * This function is meant to create a global signal registered in its
12 | * own reactive context, essentially allowing the creation outside of
13 | * your solid application.
14 | *
15 | * @param value - Object state to make reactive
16 | * @param areEqual - Comparator method
17 | * @param options - See [official doc](https://github.com/ryansolid/solid/blob/master/documentation/api.md#createsignalinitialvalue-boolean--comparatorfn-getvaluefn-setvaluefn)
18 | */
19 | export function createGlobalSignal(
20 | value: TState,
21 | areEqual?: AreEqual,
22 | options?: Options,
23 | ) {
24 | let globalSignal: [() => TState, (value: TState) => TState];
25 |
26 | createRoot(() => {
27 | globalSignal = createSignal(value, areEqual, options);
28 | });
29 |
30 | return globalSignal;
31 | }
32 |
--------------------------------------------------------------------------------
/src/createGlobalState.tsx:
--------------------------------------------------------------------------------
1 | import { createRoot } from 'solid-js';
2 | import { createStore, SetStoreFunction, Store } from 'solid-js/store';
3 |
4 | interface Options {
5 | name?: string;
6 | }
7 |
8 | /**
9 | * This function is meant to create a global state registered in its
10 | * own reactive context, essentially allowing the creation outside of
11 | * your solid application.
12 | *
13 | * @param state - Object state to make reactive
14 | * @param options - See [official doc](https://github.com/ryansolid/solid/blob/master/documentation/api.md#createstateinitvalue-state-setstate)
15 | */
16 | export function createGlobalState(state: TState, options?: Options) {
17 | let globalState: [Store, SetStoreFunction];
18 |
19 | createRoot(() => {
20 | globalState = createStore(state, options);
21 | });
22 |
23 | return globalState;
24 | }
25 |
--------------------------------------------------------------------------------
/src/createStore.tsx:
--------------------------------------------------------------------------------
1 | import type { Component } from 'solid-js';
2 | import {
3 | createContext,
4 | useContext,
5 | splitProps,
6 | mergeProps,
7 | createSignal,
8 | createComputed,
9 | } from 'solid-js';
10 | import {
11 | createStore as createState,
12 | SetStoreFunction as SetStateFunction,
13 | Store as State,
14 | } from 'solid-js/store';
15 | import { Show } from 'solid-js/web';
16 |
17 | type BaseObject = Record;
18 |
19 | type Effect = () => unknown | Promise;
20 |
21 | type GenerateStore = (options: {
22 | state: (props: Props) => Promise | Store;
23 | actions?: (set: SetStateFunction, get: State, props: Props) => Actions;
24 | effects?: (set: SetStateFunction, get: State, props: Props) => Effect[];
25 | props?: Props;
26 | }) => Promise<
27 | readonly [
28 | State,
29 | Actions & {
30 | readonly set: SetStateFunction;
31 | },
32 | ]
33 | >;
34 |
35 | interface StateFn {
36 | (props: Props): StateResult | Promise;
37 | }
38 |
39 | // https://stackoverflow.com/questions/48011353/how-to-unwrap-type-of-a-promise/49889856
40 | type ThenArg = T extends PromiseLike ? U : T;
41 |
42 | /**
43 | * Default Loader when the store is computing the initial state
44 | */
45 | const DefaultLoader: Component = () => Loading...
;
46 |
47 | const generateStore: GenerateStore = async ({ state, actions, effects, props }) => {
48 | const finalStore = await state(props);
49 | const [get, set] = createState(finalStore);
50 | const finalActions = actions ? actions(set, get, props) : {};
51 |
52 | if (effects) {
53 | for (const effect of effects(set, get, props)) {
54 | createComputed(effect);
55 | }
56 | }
57 |
58 | return [get, { ...finalActions, set }] as const;
59 | };
60 |
61 | /**
62 | * @param options - A function An object describing your store
63 | * @returns [Provider, useProvider] - A tuple Provider/useProvider
64 | *
65 | * @example
66 | * ```tsx
67 | * const [Provider, useProvider] = createStore({
68 | * state: () => ({ count: 0 }),
69 | *
70 | * actions: (set) => ({
71 | * increment = (by = 1) => set('count', c => c + by)
72 | * })
73 | * })
74 | *
75 | * const App = () => {
76 | * const [store, { increment }] = useStore()
77 | *
78 | * return {store.count}
79 | * }
80 | *
81 | * const app = createApp(App)
82 | * app.use(Provider)
83 | * app.mount('#app')
84 | * ```
85 | */
86 | export function createStore<
87 | Store extends BaseObject,
88 | Actions extends BaseObject,
89 | Props extends BaseObject
90 | >({
91 | state,
92 | actions,
93 | props,
94 | effects,
95 | }: {
96 | state: StateFn;
97 | actions?: ReturnType> extends Promise
98 | ? (
99 | set: SetStateFunction>>,
100 | get: State>>,
101 | props: Props,
102 | ) => Actions
103 | : (set: SetStateFunction, get: State, props: Props) => Actions;
104 | props?: Props;
105 | effects?: ReturnType> extends Promise
106 | ? (
107 | set: SetStateFunction>>,
108 | get: State>>,
109 | props: Props,
110 | ) => Effect[]
111 | : (set: SetStateFunction, get: State, props: Props) => Effect[];
112 | }) {
113 | type Return = readonly [
114 | State,
115 | Readonly & {
116 | readonly set: SetStateFunction;
117 | },
118 | ];
119 |
120 | const Context = createContext();
121 |
122 | const Provider: Component> = (providerProps) => {
123 | const finalProps = mergeProps(props || {}, providerProps);
124 | const [internal, external] = splitProps(finalProps, ['children']);
125 | const [value, setValue] = createSignal();
126 |
127 | generateStore({
128 | state,
129 | actions,
130 | effects,
131 | props: (external as unknown) as Props,
132 | }).then((value: Return) => setValue(value));
133 |
134 | return (
135 | // FIXME: This will break async SSR
136 |
137 | {internal.children}
138 |
139 | );
140 | };
141 |
142 | return [Provider, () => useContext(Context)] as const;
143 | }
144 |
--------------------------------------------------------------------------------
/src/index.tsx:
--------------------------------------------------------------------------------
1 | export { createApp } from './createApp';
2 | export { createStore } from './createStore';
3 | export { createGlobalSignal } from './createGlobalSignal';
4 | export { createGlobalState } from './createGlobalState';
5 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "jsx": "preserve",
4 | "jsxImportSource": "solid-js",
5 | "target": "ESNext",
6 | "module": "ESNext",
7 | "moduleResolution": "node"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------