Cole's Solid Library

Welcome to Cole's Solid Library. I wasn't totally happy with existing solutions so I decided to roll my own solution. It isn't ready for use yet it needs alot of work, mainly styling, but not totally.

Requirements

You will need the following packages. I included the npm commands.

• SolidJS

npx degit solidjs/templates/ts <name>

• Sass

npm i sass

Installation

To install the library, use npm:

npm install coles-solid-library

Import and add use the following line in App.tsx from the library. It defaults to 'dark' but also has a default value of 'light'. Should be used inside a createEffect if you want reactive updating.

  addTheme()

At the top of index.scss place the following line. It adds the dark theme and lightTheme and the addTheme() requires it. It will default to light without it.

  @use 'coles-solid-library/themes/themes.scss';

Vite setup

Add the bundled coles-solid-library/vite plugin to your vite.config (next to vite-plugin-solid). It supplies the bundler tuning this library needs so you don't hand-maintain it: a single solid-js instance (resolve.dedupe) and dev pre-bundling of the library and its icon barrels (optimizeDeps.include).

import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';
import colesSolidLibrary from 'coles-solid-library/vite';

export default defineConfig({
  plugins: [solid(), colesSolidLibrary()],
});

This replaces any hand-written optimizeDeps.include / resolve.dedupe blocks for the library, and complements — does not replace — vite-plugin-solid (still required to compile Solid JSX).

Icon variants. The plugin defaults to pre-bundling only the outlined barrel (the default coles-solid-library/icons export). If you import the rounded or sharp variants, list them so they're pre-bundled too:

colesSolidLibrary({ iconVariants: ['outlined', 'rounded'] })

Dev vs. production note. In dev, pre-bundling collapses each icon barrel into a single browser-cached chunk so the dev server loads it once instead of raw-serving thousands of individual icon modules. The dev chunk is the full barrel (esbuild can't tree-shake a pre-bundle entry against your usage) — so list only the variants you use to keep the dev cache lean. This is dev-cache only and is never shipped: your production build tree-shakes down to only the icons you actually import.

Usage

Here's a basic example of how to use the library:

import { createSignal, type Component } from 'solid-js';
import { addTheme, Body, Cell, Column, Header, Row, Table } from 'coles-solid-library';
import styles from './App.module.scss';

interface Person {
  name: string;
  age: number;
}
const App: Component = () => {
  const [data, setData] = createSignal([{ name: 'John', age: 23 }, { name: 'Jane', age: 24 }]);
  addTheme();
  return (
    <div >
      <Container theme='surface'>
        <Table style={{"border": "1px solid white"}}  data={data()}  columns={['name', 'age']}>
          <Column name='name' >
            <Header>Name</Header>
            <Cell<Person>>{(row) => row.name}</Cell>
            <Cell footer>The Names</Cell>
            <Cell<Person>  rowNumber={2} colSpan={2}>{(row) => `${row.name} is ${row.age}`}</Cell>
          </Column>

          <Column name='age'>
            <Header>Age</Header>
            <Cell<Person>>{(row) => row.age}</Cell>
            <Cell footer>The Ages</Cell>
          </Column>

          <Row header style={{"border-bottom": "1px solid white"}} />
          <Row class={styles.textCenter} />
          <Row class={styles.textCenter} style={{"border-bottom": "1px solid white"}} rowNumber={2} />
          <Row footer />
        </Table>
      </Container>
    </div>
  );
};

export default App;

Credits

This project wouldn’t be possible without the incredible support from these resources:

• SolidJS: A fast and reactive JavaScript library for building user interfaces.
• Sass: A powerful CSS extension language that streamlines styling.
• Material Icons/Symbols: A comprehensive set of symbols by Google’s Material Design.

License

This project is licensed under the MIT License.