├── .babelrc
├── .changeset
├── README.md
└── config.json
├── .github
└── workflows
│ ├── release.yml
│ └── test.yml
├── .gitignore
├── .nvmrc
├── .prettierrc
├── CHANGELOG.md
├── README.md
├── babel.config.cjs
├── package.json
├── pnpm-lock.yaml
├── src
└── index.tsx
├── test
├── hydration_script.ts
├── index.spec.tsx
└── setup-vitest.js
├── tsconfig.json
├── tsconfig.test.json
└── vitest.config.ts
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env",
4 | "@babel/preset-typescript",
5 | ["babel-preset-solid", { "generate": "dom", "hydratable": true }]
6 | ]
7 | }
--------------------------------------------------------------------------------
/.changeset/README.md:
--------------------------------------------------------------------------------
1 | # Changesets
2 |
3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
4 | with multi-package repos, or single-package repos to help you version and publish your code. You can
5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets)
6 |
7 | We have a quick list of common questions to get you started engaging with this project in
8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
9 |
--------------------------------------------------------------------------------
/.changeset/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
3 | "changelog": "@changesets/cli/changelog",
4 | "commit": false,
5 | "fixed": [],
6 | "linked": [],
7 | "access": "public",
8 | "baseBranch": "main",
9 | "updateInternalDependencies": "patch",
10 | "ignore": []
11 | }
12 |
--------------------------------------------------------------------------------
/.github/workflows/release.yml:
--------------------------------------------------------------------------------
1 | name: Release
2 |
3 | on:
4 | push:
5 | branches:
6 | - main
7 |
8 | concurrency: ${{ github.workflow }}-${{ github.ref }}
9 |
10 | jobs:
11 | release:
12 | name: Release
13 | runs-on: ubuntu-latest
14 | steps:
15 | - name: Checkout Repo
16 | uses: actions/checkout@v4
17 |
18 | - uses: pnpm/action-setup@v4
19 | with:
20 | # https://github.com/pnpm/pnpm/issues/8953
21 | version: 9.15.3
22 |
23 | - name: Use Node.js from nvmrc
24 | uses: actions/setup-node@v4
25 | with:
26 | node-version-file: '.nvmrc'
27 | registry-url: 'https://registry.npmjs.org'
28 |
29 | - name: Install Dependencies
30 | run: pnpm i --frozen-lockfile
31 |
32 | - name: Create Release Pull Request or Publish to npm
33 | id: changesets
34 | uses: changesets/action@v1
35 | with:
36 | publish: pnpm run release
37 | env:
38 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
39 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
1 | name: Tests
2 |
3 | on:
4 | workflow_dispatch:
5 | push:
6 | branches: [main]
7 | pull_request:
8 | branches: [main]
9 |
10 | jobs:
11 | test:
12 | runs-on: ubuntu-latest
13 |
14 | steps:
15 | - uses: actions/checkout@v4
16 |
17 | - name: Use Node.js from nvmrc
18 | uses: actions/setup-node@v4
19 | with:
20 | node-version-file: '.nvmrc'
21 | registry-url: 'https://registry.npmjs.org'
22 |
23 | - name: Install pnpm
24 | uses: pnpm/action-setup@v4
25 | with:
26 | version: 9
27 |
28 | - name: Install dependencies
29 | run: pnpm install
30 |
31 | - name: Run tests
32 | run: pnpm run test
33 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | dist/
2 | node_modules/
3 |
4 | .DS_Store
--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 22.13.1
2 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "trailingComma": "none",
3 | "tabWidth": 2,
4 | "semi": true,
5 | "singleQuote": false,
6 | "arrowParens": "avoid",
7 | "printWidth": 100
8 | }
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # @solidjs/meta
2 |
3 | ## 0.29.6
4 |
5 | ### Patch Changes
6 |
7 | - ae8e8ff: Fix removing one renders all previous <title>s
8 |
9 | ## 0.29.5
10 |
11 | ### Patch Changes
12 |
13 | - 8ece7e7: fix: Don't read props of the Title component during cleanup
14 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | <p>
2 | <img width="100%" src="https://assets.solidjs.com/banner?project=Meta&type=core" alt="Solid Meta">
3 | </p>
4 |
5 | # Solid Meta [](https://www.npmjs.org/package/@solidjs/meta)
6 |
7 | Asynchronous SSR-ready Document Head management for Solid based on [React Head](https://github.com/tizmagik/react-head)
8 |
9 | > For Solid 1.0 use 0.27.x or greater.
10 | > For versions of Solid 0.x use 0.26.x.
11 |
12 | ## Motivation
13 |
14 | This module allows you to define `document.head` tags anywhere in your component hierarchy. The motivations are similar to [react-helmet](https://github.com/nfl/react-helmet) in that you may only have the information for certain tags contextually deep in your component hiearchy. There are no dependencies and it should work fine with asynchronous rendering.
15 |
16 | ## Installation
17 |
18 | ```sh
19 | npm i @solidjs/meta
20 | ```
21 |
22 | ## How it works
23 |
24 | 1. You wrap your App with `<MetaProvider />`
25 | 2. To insert head tags within your app, just render one of `<Title />`, `<Meta />`, `<Style />`, `<Link />`, and `<Base />` components as often as needed.
26 | 3. On the server, if you render the `<head>` element using SolidJS in JSX, you are all good. Otherwise use `getAssets` from `solid-js/web` to insert the assets where you want.
27 |
28 | On the server, the tags are collected, and then on the client the server-generated tags are removed in favor of the client-rendered tags so that SPAs still work as expected (e.g. in cases where subsequent page loads need to change the head tags).
29 |
30 |
31 | > [!IMPORTANT]
32 | > Be sure to avoid adding any normal `<title />` tags in any server files (be it `entry-server.jsx|tsx` in SolidStart projects or inside your server file), as they would override the functionality of `@solid/meta`!
33 |
34 |
35 | ### SolidStart setup
36 |
37 | 1. Wrap your app with `<MetaProvider />` inside of the `root` of the `<Router />` component.
38 | 2. You can optionally provide a `<title />` fallback by providing a `<Title />` component inside of `<MetaProvider />`.
39 |
40 | #### `app.jsx` / `app.tsx`
41 | ```jsx
42 | // @refresh reload
43 | import { MetaProvider, Title } from "@solidjs/meta";
44 | import { Router } from "@solidjs/router";
45 | import { FileRoutes } from "@solidjs/start";
46 | import { Suspense } from "solid-js";
47 | import "./app.css";
48 |
49 | export default function App() {
50 | return (
51 | <Router
52 | root={props => (
53 | <MetaProvider>
54 | <Title>SolidStart - Basic
55 | Index
56 | About
57 | {props.children}
58 |
59 | )}
60 | >
61 |
62 |
63 | );
64 | }
65 | ```
66 |
67 | ---
68 |
69 | ### Server setup
70 |
71 | Wrap your app with `` on the server, using a `tags[]` array to pass down as part of your server-rendered payload. When rendered, the component mutates this array to contain the tags.
72 |
73 | ```jsx
74 | import { renderToString, getAssets } from 'solid-js/web';
75 | import { MetaProvider } from '@solidjs/meta';
76 | import App from './App';
77 |
78 | // ... within the context of a request ...
79 | const app = renderToString(() =>
80 |
81 |
82 |
83 | );
84 |
85 | res.send(`
86 |
87 |
88 |
89 | ${getAssets()}
90 |
91 |
92 | ${app}
93 |
94 |
95 | `);
96 | ```
97 |
98 | ### Client setup
99 |
100 | There is nothing special required on the client, just render one of head tag components whenever you want to inject a tag in the ` `.
101 |
102 | ```jsx
103 | import { MetaProvider, Title, Link, Meta } from '@solidjs/meta';
104 |
105 | const App = () => (
106 |