Skip to content

pdkn/solid-primitives

 
 

Repository files navigation

Solid Primitives

Solid Primitives

A project that strives to develop high-quality, community contributed Solid primitives. All utilities are well tested and continuously maintained. Every contribution to the repository is checked for quality and maintained to the highest degree of excellence. The ultimate goal is to extend Solid's primary and secondary primitives with a set of tertiary primitives.

While Solid Primitives is not officially maintained by the SolidJS Core Team, it is managed by members of the SolidJS core and ecosystem teams. This separation allows the core library to iterate independently while allowing Solid Primitives to remain in-sync with future plans.

Philosophy

The goal of Solid Primitives is to wrap client and server side functionality to provide a fully reactive API layer. Ultimately the more rooted our tertiary primitives are, the more they act as foundation within Solid's base ecosystem. With well built and re-used foundations, the smaller (aggregate tree-shaking benefits), more concise (readability) and stable (consistent and managed testing + maintenance) applications can be overall.

Primitives

Name Stage Primitives Size NPM

Display & Media

audio STAGE createAudio
createAudioPlayer
createAudioManager
SIZE VERSION
devices STAGE createDevices
createMicrophones
createSpeakers
createCameras
SIZE VERSION
resize-observer STAGE createResizeObserver SIZE VERSION
tween STAGE createTween SIZE VERSION
visibility-observer STAGE createPageVisibilityObserver SIZE VERSION
intersection-observer STAGE createIntersectionObserver
createViewportObserver
createVisibilityObserver
SIZE VERSION
raf STAGE createRAF
targetFPS
SIZE VERSION
media STAGE createMediaQuery
createBreakpoints
SIZE VERSION

Browser APIs

clipboard STAGE createClipboard
copyToClipboard
SIZE VERSION
event-props STAGE createEventProps SIZE VERSION
fullscreen STAGE createFullscreen SIZE VERSION
geolocation STAGE createGeolocation
createGeolocationWatcher
SIZE VERSION
permission STAGE createPermission SIZE VERSION
storage STAGE createStorage
createCookieStorage
createAsyncStorage
createStorageSignal
createLocalStorage
createSessionStorage
SIZE VERSION
timer STAGE makeTimer
createTimer
createTimeoutLoop
createPolled
createIntervalCounter
SIZE VERSION
workers STAGE createWorker
createWorkerPool
createSignaledWorker
SIZE VERSION
event-listener STAGE createEventListener
createEventSignal
createEventListenerMap
WindowEventListener
DocumentEventListener
SIZE VERSION
mutation-observer STAGE createMutationObserver SIZE VERSION

Utilities

context STAGE createContextProvider SIZE VERSION
debounce STAGE createDebounce SIZE VERSION
i18n STAGE createI18nContext
useI18n
SIZE VERSION
props STAGE createProps SIZE VERSION
script-loader STAGE createScriptLoader SIZE VERSION
share STAGE createSocialShare SIZE VERSION
throttle STAGE createThrottle SIZE VERSION
immutable STAGE List of functions SIZE VERSION
map STAGE createMap
createWeakMap
SIZE VERSION
set STAGE createSet
createWeakSet
SIZE VERSION
date STAGE createDate
createDateNow
createTimeDifference
createTimeDifferenceFromNow
createTimeAgo
createCountdown
createCountdownFromNow
SIZE VERSION
event-bus STAGE createSimpleEmitter
createEmitter
createEventBus
createEventHub
createEventStack
SIZE VERSION

Network

fetch STAGE createFetch SIZE VERSION
stream STAGE createStream
createAmplitudeStream
SIZE VERSION
graphql STAGE createGraphQLClient SIZE VERSION
connectivity STAGE createConnectivitySignal SIZE VERSION

Inputs

input-mask STAGE createInputMask SIZE VERSION
scroll STAGE createScrollObserver SIZE VERSION
selection STAGE createSelection SIZE VERSION
active-element STAGE createActiveElement
createFocusSignal
SIZE VERSION
mouse STAGE createMousePosition
createPositionToElement
SIZE VERSION
pointer STAGE createPointerListeners
createPerPointerListeners
createPointerPosition
createPointerList
SIZE VERSION

Reactivity

composites STAGE createCompositeEffect
createCompositeComputed
createCompositeRenderEffect
SIZE VERSION
destructure STAGE destructure SIZE VERSION
memo STAGE createCurtain
createWritableMemo
createLazyMemo
createAsyncMemo
createDebouncedMemo
createThrottledMemo
createPureReaction
createMemoCache
SIZE VERSION
rootless STAGE createBranch
createCallback
createDisposable
createSharedRoot
SIZE VERSION
until STAGE until SIZE VERSION
signal-builders STAGE List of builders SIZE VERSION

Control Flow

range STAGE repeat
mapRange
indexRange
Repeat
Range
IndexRange
SIZE VERSION
refs STAGE elements
refs
mapRemoved
Children
Refs
Ref
unmount
SIZE VERSION
keyed STAGE mapKey
Key
Rerun
SIZE VERSION

Contribution Process

Solid Primitives strives to provide idiomatic Solid principles but also allow room for innovation and experimentation. In a growing community many opinions and patterns merge together to produce a de facto standard. Managing opinions and expectations can be difficult. As a result, in November 2021 Solid Primitives implemented a ratification/approval tracking process roughly modelled on TC39 Proposal Stage Process. The following summarizes these stages briefly:

Stage Description
X Deprecated or rejected
0 Initial submission
1 Demonstrations and examples
2 General use (experimental)
3 Pre-shipping (final effort)
4 Accepted/shipped

Any primitive Stage 0-1 should be used with caution and with the understanding the the design or implementation may change. Beyond Stage 2 we make an effort to mitigate changes. If a primitive reaches Stage 2 it's likely to remain an official package with additional approvement until fully accepted and shipped.

Design Maxims

Other frameworks have large and extremely well established ecosystems. Notably React which has a vast array of component and hooks. The amount of choice within the ecosystem is great but often these tools are built as one-offs resulting in often un-tested logic or are designed with narrow needs. Over time the less concise these building blocks are the more they tend to repeat themselves. Our goal with Primitives is to bring the community together to contribute, evolve and utilize a powerful centralize primitive foundation.

All our primitives are meant to be consistent and sustain a level of quality. We guarantee that each is created with the utmost care. Our primitives are:

  1. Documented and follow a consistent style guide
  2. Be well tested
  3. Small, concise and practical as possible
  4. A single primitive for a single purpose
  5. No dependencies or as few as possible
  6. SSR safe entries (or short-circuits where needed) provided
  7. Wrap base level Browser APIs
  8. Should be progressively improved for future features
  9. Be focused on composition vs. isolation of logic
  10. Community voice and needs guide road map and planning
  11. Strong TypeScript support
  12. Support for both CJS and ESM
  13. Solid performance!

Basic and Compound Primitives

Each primitive is designed with composition in mind. A major rule in designing our primitives is deciding that the interface of primitives should be composable or segmented. For this reason every API is intricately studied and considered to be composed (stacked with features) or decomposed into smaller units. Designing our primitives in this manner allows for better tree-shaking and extendable complexity only as needed. You should only ship what you have to by picking from existing primitives as your foundational building blocks.

Much of the design decisions in naming are best described in the 7 Lessons to Outlive React talk by swyx. We strive to follow a similar design pattern promoted by the React core team.

make (non-reactive) vs create (reactive)

Solid uses the create prefix to define a primitive that provides reactive utility. Solid Primitives reinforces this pattern but in an effort to enhance composability we have also introduced the make prefix for identify non-reactive basic primities. Having a non-reactive alternative means that the primitive does the bare essentials such as cleaning up events or interupting a process. ie. makeTimer will create and clean-up the scheduler, providing only a clear method. createTimer provides a properly reactive primitive that composes it.

Managing Primitve Complexity

Solid Primitives is mostly about supplying 80-90% of the common-use cases for the end-user. We prefer to be less prescriptive than other hook libraries such as VueUse and supply granular solutions as opposed to monolithic primitives. The remaining 10-20% of complex use cases are likely not to be covered with this library. This is on purpose to limit the potential of bloat and extended complexity. This project strives to provide foundations and not cumulative solutions. We expect the broader ecosystem will fill the remaining need as further composition to this projects effort. This allows for just the right amount of prescription and opinion.

Lerna CLI Helpers

This package comes with a number of support utilities built with Lerna Scripts.

  • yarn ls updateReadme - This will update the list of primitives by inspecting individual packages.
  • yarn ls createPrimitive name - A helper to setup a primitive template package.

Planned Primitives

Display & Media

  • createDragAndDrop

Device

  • createBattery
  • createAccelerometer
  • createGyroscope

Browser

Network

  • createNotification
  • createPush
  • createConnectionObserver

Inputs

  • createGesture (in progress)
  • createCompositionObserver (CompositionEvent observer)
  • createKeyboard
  • createForm
  • createInput
  • createTouch

Utilities

  • createWorker (in progress)
  • createQueue
  • createEffectWhen

About

A library of high-quality primitives that extend SolidJS reactivity.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 96.8%
  • HTML 2.6%
  • Other 0.6%