This package is archived and deprecated. Everything I wanted to do with this package has been done 10x better in the solid-primitives packages.

If you want to use the solid-utils package on NPM, feel free to poke me on twitter or sonmething.

solid-utils

The ultimate companion of all your solid-js applications.

Live demo

Table of content

solid-utils

Features

Tiny in size
Tree shakeable
Typescript ready
Growing and maturing
Used in various projects (mostly pet project)
Integrate 100% of Skypack package best practices
ES Module, Common JS & source export (solid specific) ready
Doesn't entirely support SSR just yet
Untested (programmatically) - Mostly because I didn't find a proper solution yet

Installation

# npm
$ npm i solid-utils

# pnpm
$ pnpm add solid-utils

# yarn
$ yarn add solid-utils

Usage

You can find examples that outline all the utilities in the playground file.

createGlobalState

A wrapper around createStore that allows you to declare it at the global level. This essentially work by being managed in its own reactive context, removing the needs to be within your application.

Although this can be useful and seem to be the better approach, there's a reason this wasn't part of core. This should act as an escape hatch for those who migrate from more permissive libraries such as react, vue or svelte.

This accept the exact same parameters than createStore from solid-js.

Basic usage

import { createGlobalState } from 'solid-utils';

const [state, setState] = createGlobalState({ count: 0 })

const Counter = () => <button onClick={() => setState('count', c => c + 1)}>{state.count}</button>

const App = () => {
  return <>
    <Counter />

    <div>
      The current value of count is: {state.count}
      I can increment <button onClick={() => setState('count', c => c + 1)}>here</button>
      or within my <code>`Counter`</code> component.
    </div>
  </>
}

render(App, document.getElementById('app'))

createGlobalSignal

A wrapper around createSignal that allows you to declare it at the global level. This essentially work by being managed in its own reactive context, removing the needs to be within your application.

This accept the exact same parameters than createSignal from solid-js.

Basic usage

import { createGlobalSignal } from 'solid-utils';

const [count, setCount] = createGlobalSignal(0)

const Counter = () => <button onClick={() => setCount(count() + 1)}>{count()}</button>

const App = () => {
  return <>
    <Counter />

    <div>
      The current value of count is: {count()}
      I can increment <button onClick={() => setCount(count() + 1)}>here</button>
      or within my <code>`Counter`</code> component.
    </div>
  </>
}

render(App, document.getElementById('app'))

createApp

A Vue 3 inspired app mounting bootstrapper that helps manage large list of global providers

Basic usage

import { createApp } from 'solid-utils'

const App = () => <h1>Hello world!</h1>

createApp(App).mount('#app')

With providers

const app = createApp(App)

app.use(RouterProvider)
app.use(I18nProvider, { dict })
app.use(GlobalStoreProvider)

app.mount('#app')

// [new in 0.0.4] - Those are also chainable
createApp(App)
  .use(RouterProvider)
  .use(I18nProvider, { dict })
  .use(GlobalStoreProvider)
  .mount('#app')

into something like that:

render(
  <RouterProvider>
    <I18nProvider dict={dict}>
      <GlobalStoreProvider>
        <App />
      </GlobalStoreProvider>
    </I18nProvider>
  </RouterProvider>,
  document.querySelector('#app')
 )

With disposable app

Can be useful in tests or HMR

const dispose = createApp(App).mount('#app')

if (module.hot) {
   module.hot.accept()
   module.hot.dispose(dispose)
}

createStore

A small utility that helps generate Provider & associated hook

Basic usage

const [Provider, useProvider] = createStore({
  state: () => ({ count: 0, first: 'Alexandre' }),

  actions: (set, get) => ({ 
    increment(by = 1) {
        set('count', count => count + 1)
    },
    dynamicFullName(last) {
        return `${get.first} ${last} ${get.count}`;
    }
  })
})

const Counter = () => {
  const [state, { increment, dynamicFullName }] = useProvider()

  // The count here will be synced between the two <Counter /> because it's global
  return <>
    <button onClick={[increment, 1]}>{state.count}</button>
    <h1>{dynamicFullName('Mouton-Brady')}</h1>
  </>
}

render(
  () => 
    <Provider>
      <Counter />
      <Counter />
    </Provider>,
  document.getElementById('app'),
)

With default props

const [Provider, useProvider] = createStore({
  state: (props) => ({ count: props.count, first: 'Alexandre' }),

  actions: (set, get) => ({ 
    increment(by = 1) {
        set('count', count => count + 1)
    },
    dynamicFullName(last) {
        return `${get.first} ${last} ${get.count}`;
    }
  })

  props: { count: 1 }, // This will auto type the props above and the <Provider> component props
})

const Counter = () => {
  const [state, { increment, dynamicFullName }] = useProvider()

  // The count here will be synced between the two <Counter /> because it's global
  return <>
    <button onClick={[increment, 1]}>{state.count}</button>
    <h1>{dynamicFullName('Mouton-Brady')}</h1>
  </>
}

render(
  () => (
    // This `count` will be auto typed
    <Provider count={2}>
      <Counter />
      <Counter />
    </Provider>, 
    document.getElementById('app'),
  )
)

With async default props

const [Provider, useProvider] = createStore({
  props: { url: 'https://get-counter.com/json' }, // This will auto type the props above and the <Provider> component props

  state: async (props) => {
    const count = await fetch(props.url).then(r => r.json())

    return { count, first: 'Alexandre' },
  },

  actions: (set, get) => ({ 
    increment(by = 1) {
        set('count', count => count + 1)
    },
    dynamicFullName(last) {
        return `${get.first} ${last} ${get.count}`;
    }
  }),
})

const Counter = () => {
  const [state, { increment, dynamicFullName }] = useProvider()

  // The count here will be synced between the two <Counter /> because it's global
  return <>
    <button onClick={[increment, 1]}>{state.count}</button>
    <h1>{dynamicFullName('Mouton-Brady')}</h1>
  </>
}

render(
  () => (
    // This `count` will be auto typed
    <Provider count={2} loader={<p>Loading...</p>}>
      <Counter />
      <Counter />
    </Provider>, 
    document.getElementById('app'),
  )
)

With props

Not setting the third parameters prevent typescript to infer the proper types for the props interface in the first function and the <Provider> component returned by the createStore.

If any Typescript ninja come accross this I'd be more than happy to know the right way to do that...

const [Provider, useProvider] = createStore<{ count: number }>({
  state: (props) => ({ count: props.count, first: 'Alexandre' }),

  actions: (set, get) => ({ 
    increment(by = 1) {
        set('count', count => count + 1)
    },
    dynamicFullName(last) {
        return `${get.first} ${last} ${get.count}`;
    }
  })
})

const Counter = () => {
  const [state, { increment, dynamicFullName }] = useProvider()

  // The count here will be synced between the two <Counter /> because it's global
  return <>
    <button onClick={[increment, 1]}>{state.count}</button>
    <h1>{dynamicFullName('Mouton-Brady')}</h1>
  </>
}

render(
  () => (
    // This `count` props won't be typed...
    <Provider count={2}>
      <Counter />
      <Counter />
    </Provider>,
    document.getElementById('app')
  ),
)

amoutonbrady / solid-utils Goto Github PK

solid-utils's Introduction

solid-utils

Table of content

Features

Installation

Usage

createGlobalState

Basic usage

createGlobalSignal

Basic usage

createApp

Basic usage

With providers

With disposable app

createStore

Basic usage

With default props

With async default props

With props

solid-utils's People

Contributors

Stargazers

Watchers

Forkers

Recommend Projects

Recommend Topics

Recommend Org