Source code notes

[Brendan-csel]

Introduction

These are unofficial notes made mostly for the author's benefit. For that reason they will focus on the web client-rendered features of Solid.

For our use-case Solid comprises two npm packages:

babel-preset-solid package

This Babel plugin is used when our project builds to compiles JSX into Solid runtime calls.
Internally this plugin just provides some default options to babel-plugin-jsx-dom-expressions that does the actual JSX compilation.

solid-js package

This provides the runtime modules that supports the output from the Babel plugin above and our own code.

• solid-js module

  • reactive/array.ts - mapArray, indexArray
  • reactive/observable.ts - observable
  • reactive/scheduler.ts - requestCallback, cancelCallback
  • reactive/signal.ts - batch, children, createComputed, createContext, createDeferred, createEffect, createMemo, createRenderEffect, createResource, createRoot, createSelector, createSignal, devComponent, getListener, getOwner, getSuspenseContext, on, onCleanup, onError, onMount, readSignal, resumeEffects, runWithOwner, untrack, useContext, useTransition. And some only exported in DEV mode - hashValue, writeSignal, registerGraph, serializeGraph,
  • render/components.ts - createComponent, mergeProps, splitProps, lazy
  • render/flow.ts - For, Index, Show, Switch, Match, ErrorBoundary
  • render/hydration.ts - sharedConfig, setHydrateContext, nextHydrateContext
  • render/Suspense.ts - Suspense, SuspenseList
  • server/* - many exports with same names as the client-side exports above.
  • JSX types copied from dom-expressions/jsx.d.ts when Solid is built (see scripts in solid/package.json).

• solid-js/store module - reactive stores use proxies to track access.

  • store/src/store.ts - createStore, unwrap, $RAW
  • store/src/mutable.ts - createMutable
  • store/src/modifiers.ts - produce, reconcile

• solid-js/web module - These are the functions that actually interface with the DOM: creating elements; setting attributes; and handling events. These are called by the code generated by the Babel plugin.

  • web/src/index.ts
    • implements Portal and Dynamic
    • re-exports several components from solid-js - ErrorBoundary, For, For, Index, Match, mergeProp, Show, Suspense, SuspenseList, Switch
    • re-exports everything from web/src/client.js (see next)
  
  
  • web/src/client.js - simply re-exports everthing from dom-expressions/src/client.js which includes:
    • some constants - Aliases, ChildProperties, DelegatedEvents, Properties,
      SVGElements, SVGNamespace
    • some "trickiness" where dom-expressions exports some functions that are actually imported from back in solid-js/web (so a full-circle loop - see solid/web/src/core.ts below) - createComponent, effect=createRenderEffect, getOwner, memo (and few not re-exported root=createRoot, sharedConfig, asyncWrap=awaitSuspense)
    • and finally the functions that actually interface with the DOM - addEventListener, Assets, assign, classList, clearDelegatedEvents, delegateEvents, dynamicProperty, gatherHydratable, getHydrationKey, getNextElement, getNextMarker, getNextMatch, hydrate, insert, mergeProps, NoHydration, render, runHydrationEvents, setAttribute, setAttributeNS, spread, style, template
  
  
  • web/src/core.ts - re-exports (and slightly renames) some functions from solid-js to provide the required callback interface for integrating Solid with dom-expressions (which integrates with multiple other frameworks too). The actual callback integration seems to be achieved when bundling Solid by swapping out a placeholder import rxcore (used in dom-expressions client.js and server.js ) with this file (see solid/rollup.config.js).

Summary

• The Solid repo contains all the reactive primatives and components that comprise the "Solid framework".
• The dom-expressions repo contains the compile-time implementation for the Babel plugin AND provides the runtime functions that actually interface with the DOM.

Next Steps

• Review the implementation of babel-plugin-jsx-dom-expressions.
• Review the runtime DOM "creation" code.
• Review the reactive data structures and how they result in DOM updates (and other effects).
• Review lifecycle callbacks
• Review the scheduler
• Review suspense

It is likely the investigations will overlap somewhat so the approach will probably evolve.