{}
Protected Route
8 |hello {session$.user.name}
9 |not logged in
,
13 | )
14 |
--------------------------------------------------------------------------------
/examples/og/src/routes/test2.tsx:
--------------------------------------------------------------------------------
1 | import { DynamicImage } from '@solid-mediakit/og'
2 | import { createSignal } from 'solid-js'
3 |
4 | const [signal] = createSignal('')
5 | const coolVar = (
6 | {signal()}
8 | hey
13 | } 14 | -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "declaration": true, 4 | "allowSyntheticDefaultImports": true, 5 | "target": "esnext", 6 | "newLine": "LF", 7 | "moduleResolution": "Node", 8 | "strict": true, 9 | "module": "esnext", 10 | "types": ["node"] 11 | }, 12 | "exclude": ["node_modules", "dist"] 13 | } 14 | -------------------------------------------------------------------------------- /examples/jd-prpc/src/middleware.ts: -------------------------------------------------------------------------------- 1 | import { authMiddleware } from "@solid-mediakit/auth"; 2 | import { createMiddleware } from "@solidjs/start/middleware"; 3 | import { authOptions } from "./server/auth"; 4 | 5 | const pathsToPreload = ["/"]; 6 | 7 | export default createMiddleware({ 8 | onRequest: [authMiddleware(pathsToPreload, authOptions)], 9 | }); 10 | -------------------------------------------------------------------------------- /examples/jd-prpc/src/server/hello/hello.queries.ts: -------------------------------------------------------------------------------- 1 | import { z } from 'zod' 2 | import { helloCaller } from '../prpc' 3 | 4 | export const helloQuery = helloCaller( 5 | z.object({ 6 | hello: z.string(), 7 | }), 8 | ({ input$, ctx$ }) => { 9 | if (input$.hello === 'hello') { 10 | return ctx$.hello 11 | } 12 | return ctx$.world 13 | }, 14 | ) 15 | -------------------------------------------------------------------------------- /examples/log/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | dist 3 | .solid 4 | .output 5 | .vercel 6 | .netlify 7 | .vinxi 8 | 9 | # Environment 10 | .env 11 | .env*.local 12 | 13 | # dependencies 14 | /node_modules 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | *.launch 21 | .settings/ 22 | 23 | # Temp 24 | gitignore 25 | 26 | # System Files 27 | .DS_Store 28 | Thumbs.db 29 | -------------------------------------------------------------------------------- /examples/og/.gitignore: -------------------------------------------------------------------------------- 1 | 2 | dist 3 | .solid 4 | .output 5 | .vercel 6 | .netlify 7 | .vinxi 8 | 9 | # Environment 10 | .env 11 | .env*.local 12 | 13 | # dependencies 14 | /node_modules 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | *.launch 21 | .settings/ 22 | 23 | # Temp 24 | gitignore 25 | 26 | # System Files 27 | .DS_Store 28 | Thumbs.db 29 | -------------------------------------------------------------------------------- /packages/prpc/tests/src/server/hello/hello.queries.ts: -------------------------------------------------------------------------------- 1 | import { z } from 'zod' 2 | import { helloCaller } from '../prpc' 3 | 4 | export const helloQuery = helloCaller( 5 | z.object({ 6 | hello: z.string(), 7 | }), 8 | ({ input$, ctx$ }) => { 9 | if (input$.hello === 'hello') { 10 | return ctx$.hello 11 | } 12 | return ctx$.world 13 | }, 14 | ) 15 | -------------------------------------------------------------------------------- /docs/.gitignore: -------------------------------------------------------------------------------- 1 | dist 2 | .wrangler 3 | .output 4 | .vercel 5 | .netlify 6 | .vinxi 7 | app.config.timestamp_*.js 8 | 9 | # Environment 10 | .env 11 | .env*.local 12 | 13 | # dependencies 14 | /node_modules 15 | 16 | # IDEs and editors 17 | /.idea 18 | .project 19 | .classpath 20 | *.launch 21 | .settings/ 22 | 23 | # Temp 24 | gitignore 25 | 26 | # System Files 27 | .DS_Store 28 | Thumbs.db 29 | -------------------------------------------------------------------------------- /examples/auth/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/forms/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/jd-prpc/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/media/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/prpc-clerk/src/middleware.ts: -------------------------------------------------------------------------------- 1 | import { createMiddleware } from '@solidjs/start/middleware' 2 | import { clerkMiddleware } from 'clerk-solidjs/start/server' 3 | 4 | export default createMiddleware({ 5 | onRequest: [ 6 | clerkMiddleware({ 7 | publishableKey: process.env.VITE_CLERK_PUBLISHABLE_KEY, 8 | secretKey: process.env.CLERK_SECRET_KEY, 9 | }), 10 | ], 11 | }) 12 | -------------------------------------------------------------------------------- /examples/prpc/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/prpc-clerk/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /examples/routetypes/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/auth/solid/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "@typescript-eslint/parser", 3 | "parserOptions": { 4 | "project": "./tsconfig.json" 5 | }, 6 | "plugins": ["@typescript-eslint"], 7 | "extends": [ 8 | "plugin:solid/typescript", 9 | "plugin:@typescript-eslint/recommended" 10 | ], 11 | "rules": { 12 | "@typescript-eslint/consistent-type-imports": "warn" 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /packages/og/tests/fixtures/solid-start/realistic-styles/code.js: -------------------------------------------------------------------------------- 1 | const coolVar =
13 | {`👋 Hello, ${count() * 2}!`}
14 |
15 | Page Not Found
10 |11 | Visit{" "} 12 | 13 | start.solidjs.com 14 | {" "} 15 | to learn how to build SolidStart apps. 16 |
17 |Page Not Found
10 |11 | Visit{" "} 12 | 13 | start.solidjs.com 14 | {" "} 15 | to learn how to build SolidStart apps. 16 |
17 |{children}
15 | {scripts}
16 |
17 |
18 | )}
19 | />
20 | ))
21 |
--------------------------------------------------------------------------------
/examples/forms/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | import { createHandler, StartServer } from '@solidjs/start/server'
2 |
3 | export default createHandler(() => (
4 | {children}
15 | {scripts}
16 |
17 |
18 | )}
19 | />
20 | ))
21 |
--------------------------------------------------------------------------------
/examples/media/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | import { createHandler, StartServer } from '@solidjs/start/server'
2 |
3 | export default createHandler(() => (
4 | {children}
15 | {scripts}
16 |
17 |
18 | )}
19 | />
20 | ))
21 |
--------------------------------------------------------------------------------
/examples/prpc/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | import { createHandler, StartServer } from '@solidjs/start/server'
2 |
3 | export default createHandler(() => (
4 | {children}
15 | {scripts}
16 |
17 |
18 | )}
19 | />
20 | ))
21 |
--------------------------------------------------------------------------------
/docs/src/routes/packages/prpc/response.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'response$'
3 | description: 'response$ Utility'
4 | order: 8
5 | ---
6 |
7 | # {frontmatter.title}
8 |
9 | Use this function to **return data & modify headers** (the return type is also infered from the data passed to response$):
10 |
11 | ```ts
12 | import { createCaller, response$ } from '@solid-mediakit/prpc'
13 |
14 | let setHeader = false
15 |
16 | export const myQuery = createCaller(() => {
17 | if (setHeader) {
18 | return response$(1, {
19 | headers: { this: 'that' },
20 | })
21 | }
22 | return 'yes'
23 | })
24 |
25 | // respone type: number | string
26 | ```
27 |
--------------------------------------------------------------------------------
/examples/jd-prpc/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | import { createHandler, StartServer } from "@solidjs/start/server";
2 |
3 | export default createHandler(() => (
4 | {children}
15 | {scripts}
16 |
17 |
18 | )}
19 | />
20 | ));
21 |
--------------------------------------------------------------------------------
/examples/prpc-clerk/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | import { createHandler, StartServer } from '@solidjs/start/server'
2 |
3 | export default createHandler(() => (
4 | {children}
15 | {scripts}
16 |
17 |
18 | )}
19 | />
20 | ))
21 |
--------------------------------------------------------------------------------
/examples/routetypes/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | import { createHandler, StartServer } from '@solidjs/start/server'
2 |
3 | export default createHandler(() => (
4 | {children}
15 | {scripts}
16 |
17 |
18 | )}
19 | />
20 | ))
21 |
--------------------------------------------------------------------------------
/packages/auth/solid/tsconfig.build.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "declaration": true,
4 | "allowSyntheticDefaultImports": true,
5 | "esModuleInterop": true,
6 | "target": "esnext",
7 | "moduleResolution": "Node",
8 | "strict": false,
9 | "jsx": "preserve",
10 | "jsxImportSource": "solid-js",
11 | "module": "esnext",
12 | "outDir": "./dist",
13 | "rootDir": "./src",
14 | "types": ["@solidjs/start/env", "node", "./locals"],
15 | "skipDefaultLibCheck": true,
16 | "skipLibCheck": true
17 | },
18 | "include": ["./src/**/*"],
19 | "exclude": ["node_modules", "dist", "./locals.d.ts"]
20 | }
21 |
--------------------------------------------------------------------------------
/examples/log/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import { createHandler, StartServer } from "@solidjs/start/server";
3 |
4 | export default createHandler(() => (
5 | {children}
16 | {scripts}
17 |
18 |
19 | )}
20 | />
21 | ));
22 |
--------------------------------------------------------------------------------
/examples/og/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import { createHandler, StartServer } from "@solidjs/start/server";
3 |
4 | export default createHandler(() => (
5 | {children}
16 | {scripts}
17 |
18 |
19 | )}
20 | />
21 | ));
22 |
--------------------------------------------------------------------------------
/packages/auth/plugin/README.md:
--------------------------------------------------------------------------------
1 | # @solid-mediakit/auth-plugin
2 |
3 | A Vite plugin for Mediakit Auth
4 |
5 | ### Installation
6 |
7 | ```bash
8 | pnpm install @solid-mediakit/auth-plugin
9 | ```
10 |
11 | ### Adding The Vite Plugin
12 |
13 | Go ahead to `app.config.ts` and add the following:
14 |
15 | ```ts
16 | import { defineConfig } from '@solidjs/start/config'
17 | import { authVite } from '@solid-mediakit/auth-plugin' // ->
18 |
19 | export default defineConfig({
20 | ssr: true,
21 | vite: {
22 | plugins: [authVite({ log: false })], // ->
23 | },
24 | })
25 | ```
26 |
27 | Now read the [Auth documentation](https://mediakit-taupe.vercel.app/auth/install)
28 |
--------------------------------------------------------------------------------
/packages/og/tests/fixtures/solid-start/custom-image-options/output.js:
--------------------------------------------------------------------------------
1 | import { createOpenGraphImage } from '@solid-mediakit/og/server'
2 | import { createMemo } from 'solid-js'
3 | const DynamicImage1ServerFunction = (...args) => {
4 | 'use server'
5 |
6 | return createOpenGraphImage(Hi!
, {
7 | emoji: 'openmoji',
8 | })
9 | }
10 | const DynamicImage1 = (props) => {
11 | const url = createMemo(() => {
12 | return (
13 | DynamicImage1ServerFunction.url.replace('_server', '_server/') +
14 | `&args=${encodeURIComponent(JSON.stringify(props.values))}`
15 | )
16 | })
17 | return url
18 | }
19 | DynamicImage1({
20 | values: [],
21 | })
--------------------------------------------------------------------------------
/packages/og/tests/fixtures/solid-start/variables/output.js:
--------------------------------------------------------------------------------
1 | import { createOpenGraphImage } from '@solid-mediakit/og/server'
2 | import { createMemo } from 'solid-js'
3 | const DynamicImage1ServerFunction = (...args) => {
4 | 'use server'
5 |
6 | const [r0] = args
7 | return createOpenGraphImage({r0}
)
8 | }
9 | const DynamicImage1 = (props) => {
10 | const url = createMemo(() => {
11 | return (
12 | DynamicImage1ServerFunction.url.replace('_server', '_server/') +
13 | `&args=${encodeURIComponent(JSON.stringify(props.values))}`
14 | )
15 | })
16 | return url
17 | }
18 | const coolVar = DynamicImage1({
19 | values: [nonSignal],
20 | })
--------------------------------------------------------------------------------
/packages/prpc/plugin/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "exclude": ["node_modules"],
3 | "include": ["src"],
4 | "compilerOptions": {
5 | "module": "ESNext",
6 | "lib": ["ESNext", "DOM"],
7 | "importHelpers": true,
8 | "declaration": true,
9 | "sourceMap": true,
10 | "rootDir": "./src",
11 | "strict": true,
12 | "noUnusedLocals": true,
13 | "noUnusedParameters": true,
14 | "noImplicitReturns": true,
15 | "noFallthroughCasesInSwitch": true,
16 | "moduleResolution": "node",
17 | "jsx": "react",
18 | "esModuleInterop": true,
19 | "target": "ES2017",
20 | "skipDefaultLibCheck": true,
21 | "skipLibCheck": true
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/examples/jd-prpc/src/server/prpc.ts:
--------------------------------------------------------------------------------
1 | import { createCaller, error$ } from '@solid-mediakit/prpc'
2 | import { authOptions } from './auth'
3 | import { getSession } from '@solid-mediakit/auth'
4 |
5 | export const helloCaller = createCaller
6 | .use(() => {
7 | return {
8 | hello: 1,
9 | }
10 | })
11 | .use(({ ctx$ }) => {
12 | return {
13 | ...ctx$,
14 | world: 2,
15 | }
16 | })
17 |
18 | export const userCaller = createCaller.use(async ({ event$ }) => {
19 | const session = await getSession(event$.request, authOptions)
20 | if (!session) {
21 | return error$('Unauthorized', {
22 | status: 401,
23 | })
24 | }
25 | return session
26 | })
27 |
--------------------------------------------------------------------------------
/packages/og/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 | export default defineConfig([
3 | {
4 | entry: ['src/index.tsx'],
5 | esbuildOptions: (opts) => {
6 | opts.jsx = 'preserve'
7 | opts.outExtension = { '.js': '.jsx' }
8 | opts.entryNames = '[name]'
9 | },
10 | target: 'esnext',
11 | format: 'esm',
12 | splitting: false,
13 | },
14 | {
15 | entry: [
16 | 'src/unplugin/index.ts',
17 | 'src/server/index.ts',
18 | 'src/compiler/index.ts',
19 | ],
20 | esbuildOptions(opts) {
21 | opts.entryNames = '[dir]'
22 | },
23 | target: 'esnext',
24 | format: 'esm',
25 | splitting: false,
26 | },
27 | ])
28 |
--------------------------------------------------------------------------------
/packages/prpc/tests/src/server/authpc.ts:
--------------------------------------------------------------------------------
1 | import { createCaller, error$ } from '@solid-mediakit/prpc'
2 | import { authOptions } from './auth'
3 | import { getSession } from '@solid-mediakit/auth'
4 |
5 | export const helloCaller = createCaller
6 | .use(() => {
7 | return {
8 | hello: 1,
9 | }
10 | })
11 | .use(({ ctx$ }) => {
12 | return {
13 | ...ctx$,
14 | world: 2,
15 | }
16 | })
17 |
18 | export const userCaller = createCaller.use(async ({ event$ }) => {
19 | const session = await getSession(event$.request, authOptions)
20 | if (!session) {
21 | return error$('Unauthorized', {
22 | status: 401,
23 | })
24 | }
25 | return session
26 | })
27 |
--------------------------------------------------------------------------------
/docs/src/routes/packages/og/opengraph.mdx:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'OpenGraph'
3 | description: 'Using `DynamicImage` to generate opengraph images'
4 | order: 3
5 | ---
6 |
7 | # {frontmatter.title}
8 |
9 | **Using the `OpenGraph` component**
10 |
11 | The `OpenGraph` component simply takes the origin of your site as a prop, and a [`DynamicImage`](../dynamic-image) component as its child:
12 |
13 | ```tsx
14 | import { DynamicImage, OpenGraph } from '@solid-mediakit/og'
15 |
16 | export const Component = () => {
17 | return (
18 | This is very cool!
21 |
8 |
9 |
10 |
,
11 | )
12 | }
13 | const DynamicImage1 = (props) => {
14 | const url = createMemo(() => {
15 | return (
16 | DynamicImage1ServerFunction.url.replace('_server', '_server/') +
17 | `&args=${encodeURIComponent(JSON.stringify(props.values))}`
18 | )
19 | })
20 | return url
21 | }
22 | const coolVar = DynamicImage1({
23 | values: [],
24 | })
--------------------------------------------------------------------------------
/.github/changeset-version.js:
--------------------------------------------------------------------------------
1 | // ORIGINALLY FROM CLOUDFLARE WRANGLER:
2 | // https://github.com/cloudflare/wrangler2/blob/main/.github/changeset-version.js
3 |
4 | import { exec } from 'child_process'
5 | // This script is used by the `release.yml` workflow to update the version of the packages being released.
6 | // The standard step is only to run `changeset version` but this does not update the package-lock.json file.
7 | // So we also run `npm install`, which does this update.
8 | // This is a workaround until this is handled automatically by `changeset version`.
9 | // See https://github.com/changesets/changesets/issues/421.
10 | exec('pnpm changeset version')
11 | exec('pnpm i --lockfile-only --no-frozen-lockfile')
12 |
--------------------------------------------------------------------------------
/examples/prpc/src/use/test.ts:
--------------------------------------------------------------------------------
1 | import { z } from 'zod'
2 | import { createAction, createCaller } from '@solid-mediakit/prpc'
3 |
4 | const withCtx = createCaller.use(() => {
5 | const num = 1
6 | return {
7 | num,
8 | }
9 | })
10 |
11 | export const callTest = withCtx(
12 | z.object({
13 | test: z.string(),
14 | }),
15 | ({ input$, event$, session$, ctx$ }) => {
16 | console.log('user-agent', event$.request.headers.get('user-agent'))
17 | console.log('Welcome', session$.user?.name)
18 | console.log('ctx', ctx$)
19 | return `hey ${input$.test}`
20 | },
21 | {
22 | protected: true,
23 | },
24 | )
25 |
26 | export const mutationTest = createAction(() => {
27 | return 1
28 | })
29 |
--------------------------------------------------------------------------------
/packages/prpc/tests/src/caller/wrapImport.ts:
--------------------------------------------------------------------------------
1 | import { importCaller } from './withImport'
2 | import { myCaller } from './withMw'
3 |
4 | export const wrappedImport = importCaller.use(({ ctx$ }) => {
5 | return {
6 | ...ctx$,
7 | lmao: 1,
8 | }
9 | })
10 |
11 | export const wrappedQuery = wrappedImport(
12 | async () => {
13 | return {
14 | ttt: 1,
15 | }
16 | },
17 | {
18 | method: 'GET',
19 | },
20 | )
21 |
22 | export const testCaller = myCaller.use(() => {
23 | return {
24 | delete: true,
25 | }
26 | })
27 |
28 | export const testQuery = testCaller(
29 | async () => {
30 | return {
31 | lll: 1,
32 | }
33 | },
34 | {
35 | method: 'GET',
36 | },
37 | )
38 |
--------------------------------------------------------------------------------
/docs/src/entry-server.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import { getHtmlProps } from "@kobalte/solidbase/server";
3 | import { createHandler, StartServer } from "@solidjs/start/server";
4 |
5 | export default createHandler(() => (
6 | {children}
17 | {scripts}
18 |
19 |
20 | )}
21 | />
22 | ));
23 |
--------------------------------------------------------------------------------
/rollup.config.js:
--------------------------------------------------------------------------------
1 | import babel from '@rollup/plugin-babel'
2 | import nodeResolve from '@rollup/plugin-node-resolve'
3 |
4 | export default {
5 | input: 'src/client.tsx',
6 | output: [
7 | {
8 | file: 'dist/client.js',
9 | format: 'es',
10 | },
11 | ],
12 | external: [
13 | 'solid-js',
14 | '@solidjs/start',
15 | 'solid-js/web',
16 | 'solid-js/web/storage',
17 | ],
18 | plugins: [
19 | nodeResolve({
20 | extensions: ['.js', '.ts', '.tsx'],
21 | }),
22 | babel({
23 | extensions: ['.js', '.ts', '.tsx'],
24 | babelHelpers: 'bundled',
25 | presets: ['solid', '@babel/preset-typescript'],
26 | exclude: 'node_modules/**',
27 | }),
28 | ],
29 | }
30 |
--------------------------------------------------------------------------------
/examples/jd-prpc/src/app.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import './app.css'
3 | import { MetaProvider, Title } from '@solidjs/meta'
4 | import { Router } from '@solidjs/router'
5 | import { FileRoutes } from '@solidjs/start/router'
6 | import { Suspense } from 'solid-js'
7 | import { SessionProvider } from '@solid-mediakit/auth/client'
8 |
9 | export default function App() {
10 | return (
11 | {r0}
)
9 | }
10 | const DynamicImage1 = (props) => {
11 | const url = createMemo(() => {
12 | return (
13 | DynamicImage1ServerFunction.url.replace('_server', '_server/') +
14 | `&args=${encodeURIComponent(JSON.stringify(props.values))}`
15 | )
16 | })
17 | return url
18 | }
19 | const [signal] = createSignal('')
20 | const coolVar = DynamicImage1({
21 | values: [signal()],
22 | })
23 |
--------------------------------------------------------------------------------
/packages/og/tests/fixtures/solid-start/exclude-static/output.js:
--------------------------------------------------------------------------------
1 | import { createOpenGraphImage } from '@solid-mediakit/og/server'
2 | import { createMemo } from 'solid-js'
3 | const DynamicImage1ServerFunction = (...args) => {
4 | 'use server'
5 |
6 | return createOpenGraphImage(
7 |
12 | Hello
13 |
,
14 | )
15 | }
16 | const DynamicImage1 = (props) => {
17 | const url = createMemo(() => {
18 | return (
19 | DynamicImage1ServerFunction.url.replace('_server', '_server/') +
20 | `&args=${encodeURIComponent(JSON.stringify(props.values))}`
21 | )
22 | })
23 | return url
24 | }
25 | const coolVar = DynamicImage1({
26 | values: [],
27 | })
--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mediakit-docs",
3 | "private": true,
4 | "type": "module",
5 | "scripts": {
6 | "dev": "vinxi dev",
7 | "build": "vinxi build",
8 | "start": "vinxi start",
9 | "version": "vinxi version"
10 | },
11 | "dependencies": {
12 | "@kobalte/solidbase": "^0.2.17",
13 | "@solidjs/meta": "^0.29.4",
14 | "@solidjs/router": "^0.15.3",
15 | "@solidjs/start": "^1.1.7",
16 | "solid-js": "^1.9.9",
17 | "vinxi": "^0.5.8"
18 | },
19 | "engines": {
20 | "node": ">=22"
21 | },
22 | "devDependencies": {
23 | "@iconify-json/ri": "^1.2.5",
24 | "@solid-mediakit/og": "workspace:*",
25 | "@vercel/og": "^0.8.5",
26 | "typescript": "^5.9.2",
27 | "yaml": "^2.8.1"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/examples/auth/src/app.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import { MetaProvider, Title } from '@solidjs/meta'
3 | import { Router, useLocation } from '@solidjs/router'
4 | import { FileRoutes } from '@solidjs/start/router'
5 | import { Component, JSXElement, Suspense } from 'solid-js'
6 | import './app.css'
7 | import { SessionProvider } from '@solid-mediakit/auth/client'
8 |
9 | export default function App() {
10 | return (
11 |
14 |
21 |
22 | 23 | Visit{' '} 24 | 25 | start.solidjs.com 26 | {' '} 27 | to learn how to build SolidStart apps. 28 |
29 |
13 |
18 | 14 | Query 15 |
16 |{JSON.stringify(hello1())}
17 |
7 |
8 |
9 |
23 |
24 |
32 |
33 | }
--------------------------------------------------------------------------------
/packages/og/tests/fixtures/solid-start/partially-dynamic-object/output.js:
--------------------------------------------------------------------------------
1 | import { createOpenGraphImage } from '@solid-mediakit/og/server'
2 | import { createMemo } from 'solid-js'
3 | import { createSignal } from 'solid-js'
4 | const DynamicImage1ServerFunction = (...args) => {
5 | 'use server'
6 |
7 | const [r0] = args
8 | return createOpenGraphImage(
9 |
20 | {`👋 Hello, ${count() * 2}!`}
21 |
22 |
15 | {}
16 |
,
17 | )
18 | }
19 | const DynamicImage1 = (props) => {
20 | const url = createMemo(() => {
21 | return (
22 | DynamicImage1ServerFunction.url.replace('_server', '_server/') +
23 | `&args=${encodeURIComponent(JSON.stringify(props.values))}`
24 | )
25 | })
26 | return url
27 | }
28 | const [signal] = createSignal('hello')
29 | const coolVar = DynamicImage1({
30 | values: [signal()],
31 | })
--------------------------------------------------------------------------------
/examples/jd-prpc/src/server/auth.ts:
--------------------------------------------------------------------------------
1 | import { type SolidAuthConfig } from '@solid-mediakit/auth'
2 | import Discord from '@auth/core/providers/discord'
3 | import { PrismaAdapter } from '@auth/prisma-adapter'
4 | import { prisma } from './db'
5 |
6 | declare module '@auth/core/types' {
7 | export interface Session {
8 | user: {
9 | id: string
10 | } & DefaultSession['user']
11 | }
12 | }
13 |
14 | export const authOptions: SolidAuthConfig = {
15 | callbacks: {
16 | session({ session, user }) {
17 | if (session.user) {
18 | session.user.id = user.id
19 | }
20 | return session
21 | },
22 | },
23 | adapter: PrismaAdapter(prisma),
24 | providers: [
25 | Discord({
26 | clientId: process.env.DISCORD_ID,
27 | clientSecret: process.env.DISCORD_SECRET,
28 | }),
29 | ],
30 | debug: false,
31 | basePath: import.meta.env.VITE_AUTH_PATH,
32 | }
33 |
--------------------------------------------------------------------------------
/packages/og/tests/fixtures/tanstack-start/basic/output.js:
--------------------------------------------------------------------------------
1 | import { createOpenGraphImage } from '@solid-mediakit/og/server'
2 | import { createMemo } from 'solid-js'
3 | import { createSignal } from 'solid-js'
4 | const DynamicImage1ServerFunction = createServerFn({
5 | method: 'GET',
6 | response: 'raw',
7 | }).handler((ctx) => {
8 | const args = ctx.data.values
9 | const [r0] = args
10 | return createOpenGraphImage({r0}
)
11 | })
12 | const DynamicImage1 = (props) => {
13 | const payload = () => ({
14 | data: {
15 | values: props.values,
16 | },
17 | context: {},
18 | })
19 | const url = createMemo(
20 | () =>
21 | `${DynamicImage1ServerFunction.url}?payload=${encodeURIComponent(JSON.stringify(payload()))}&createServerFn&raw`,
22 | )
23 | return url
24 | }
25 | const [signal] = createSignal('')
26 | const coolVar = DynamicImage1({
27 | values: [signal()],
28 | })
--------------------------------------------------------------------------------
/packages/forms/solid/src/error.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import type { ZodSchema, inferFlattenedErrors } from 'zod'
3 |
4 | export class MediakitClientError
17 |
18 |
19 |
33 |
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/examples/media/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "dev-media",
3 | "private": true,
4 | "scripts": {
5 | "dev": "vinxi dev",
6 | "build": "vinxi build",
7 | "start": "vinxi start",
8 | "lint": "eslint --fix \"**/*.{ts,tsx,js,jsx}\""
9 | },
10 | "type": "module",
11 | "devDependencies": {
12 | "@types/node": "^22.0.0",
13 | "@typescript-eslint/eslint-plugin": "^7.18.0",
14 | "@typescript-eslint/parser": "^7.18.0",
15 | "autoprefixer": "^10.4.19",
16 | "eslint": "^9.8.0",
17 | "eslint-plugin-solid": "^0.14.1",
18 | "postcss": "^8.4.40",
19 | "tailwindcss": "^3.4.7",
20 | "typescript": "^5.5.4",
21 | "vite": "^6.2.2"
22 | },
23 | "dependencies": {
24 | "@solid-mediakit/media": "workspace:*",
25 | "@solidjs/meta": "^0.29.4",
26 | "@solidjs/router": "^0.15.1",
27 | "@solidjs/start": "^1.1.3",
28 | "solid-js": "^1.9.5",
29 | "vinxi": "^0.5.3"
30 | },
31 | "engines": {
32 | "node": ">=16"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/media/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@solid-mediakit/media",
3 | "version": "0.0.8",
4 | "type": "module",
5 | "description": "A media utility library for Solid.",
6 | "main": "./dist/index/index.jsx",
7 | "module": "./dist/index/index.jsx",
8 | "exports": {
9 | ".": {
10 | "types": "./dist/index/index.d.ts",
11 | "import": "./dist/index/index.jsx",
12 | "default": "./dist/index/index.jsx"
13 | }
14 | },
15 | "scripts": {
16 | "build": "tsc && rollup -c",
17 | "clean": "rimraf dist node_modules"
18 | },
19 | "license": "ISC",
20 | "devDependencies": {
21 | "@rollup/plugin-typescript": "^11.1.6",
22 | "typescript": "^5.5.4",
23 | "solid-js": "^1.9.5",
24 | "rollup-preset-solid": "^2.0.1",
25 | "babel-preset-solid": "^1.8.22"
26 | },
27 | "peerDependencies": {
28 | "solid-js": "^1.9.5"
29 | },
30 | "dependencies": {
31 | "@solid-mediakit/shared": "workspace:*"
32 | },
33 | "author": "OrJDev"
34 | }
35 |
--------------------------------------------------------------------------------
/packages/auth/plugin/src/index.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import type { Plugin } from 'vite'
3 | import { compileAuth, type AuthPluginOptions } from './compiler'
4 | import { babel as babelUtils, repushPlugin } from '@solid-mediakit/shared'
5 |
6 | export function authVite(opts: AuthPluginOptions): Plugin {
7 | const filter = babelUtils.getFilter(opts?.filter)
8 | const plugin: Plugin = {
9 | enforce: 'pre',
10 | name: 'auth',
11 | async transform(code, id) {
12 | if (!filter(id)) {
13 | return code
14 | }
15 | if (code.includes('protected$(') || code.includes('session$')) {
16 | return await compileAuth(code, id, opts)
17 | }
18 | return undefined
19 | },
20 | configResolved(config) {
21 | repushPlugin(config.plugins as Plugin[], plugin, [
22 | 'vite-server-references',
23 | 'solid',
24 | 'vinxi:routes',
25 | ])
26 | },
27 | }
28 | return plugin
29 | }
30 |
--------------------------------------------------------------------------------
/examples/auth/src/routes/auth/[provider].tsx:
--------------------------------------------------------------------------------
1 | import { useAuth } from '@solid-mediakit/auth/client'
2 | import { useParams } from '@solidjs/router'
3 | import { createEffect, on, VoidComponent } from 'solid-js'
4 |
5 | const AuthProvider: VoidComponent = () => {
6 | const params = useParams()
7 | const auth = useAuth()
8 | createEffect(
9 | on(auth.status, (status) => {
10 | if (status === 'authenticated') {
11 | window.close()
12 | } else if (status === 'unauthenticated') {
13 | void auth.signIn(params.provider)
14 | }
15 | }),
16 | )
17 |
18 | return (
19 |
30 | {`👋 Hello, ${user()}!`}
31 |
32 |
20 |
27 | )
28 | }
29 |
30 | export default AuthProvider
31 |
--------------------------------------------------------------------------------
/examples/auth/src/routes/loader.tsx:
--------------------------------------------------------------------------------
1 | import { protected$ } from '@solid-mediakit/auth'
2 | import { query, createAsync } from '@solidjs/router'
3 | import { Show, getRequestEvent } from 'solid-js/web'
4 |
5 | const getSomething = query(async () => {
6 | 'use server'
7 | const event = getRequestEvent()!
8 | await new Promise((resolve) => setTimeout(resolve, 3000))
9 | return event.request.headers.get('user-agent')!
10 | }, 'something')
11 |
12 | export const route = {
13 | load: () => getSomething(),
14 | }
15 |
16 | export default protected$(
17 | (session$) => {
18 | const something = createAsync(() => getSomething())
19 | return (
20 |
21 | Redirecting...
22 |
23 | 24 | Please Wait While HackChat Is Validating Your Request 25 |
26 |Protected Route
22 |hello {session$.user?.name}
23 |not logged in
,
32 | )
33 |
--------------------------------------------------------------------------------
/packages/og/tests/fixtures/solid-start/realistic-styles/output.js:
--------------------------------------------------------------------------------
1 | import { createOpenGraphImage } from '@solid-mediakit/og/server'
2 | import { createMemo } from 'solid-js'
3 | const DynamicImage1ServerFunction = (...args) => {
4 | 'use server'
5 |
6 | const [r0] = args
7 | return createOpenGraphImage(
8 |
19 | {`👋 Hello, ${r0 * 2}!`}
20 |
,
21 | )
22 | }
23 | const DynamicImage1 = (props) => {
24 | const url = createMemo(() => {
25 | return (
26 | DynamicImage1ServerFunction.url.replace('_server', '_server/') +
27 | `&args=${encodeURIComponent(JSON.stringify(props.values))}`
28 | )
29 | })
30 | return url
31 | }
32 | const coolVar = DynamicImage1({
33 | values: [count()],
34 | })
--------------------------------------------------------------------------------
/packages/prpc/tests/src/caller/moreWrap.ts:
--------------------------------------------------------------------------------
1 | import { myCaller } from './withMw'
2 | import { wrappedImport } from './wrapImport'
3 |
4 | export const wrappedImport2 = wrappedImport.use(() => {
5 | return {
6 | lol: true,
7 | }
8 | })
9 | export const wrappedImport3 = wrappedImport2.use(({ ctx$ }) => {
10 | return {
11 | ...ctx$,
12 | lmao: 1,
13 | }
14 | })
15 |
16 | export const wrappedQuery3 = wrappedImport3(
17 | async () => {
18 | return {
19 | ttt: 1,
20 | }
21 | },
22 | {
23 | method: 'GET',
24 | },
25 | )
26 |
27 | export const wrappedQuery2 = wrappedImport2(
28 | async () => {
29 | return {
30 | ttt: 1,
31 | }
32 | },
33 | {
34 | method: 'GET',
35 | },
36 | )
37 |
38 | export const testCaller = myCaller.use(() => {
39 | return {
40 | delete: true,
41 | }
42 | })
43 |
44 | export const testQuery = testCaller(
45 | async () => {
46 | return {
47 | lll: 1,
48 | }
49 | },
50 | {
51 | method: 'GET',
52 | },
53 | )
54 |
--------------------------------------------------------------------------------
/examples/prpc-clerk/src/app.tsx:
--------------------------------------------------------------------------------
1 | // @refresh reload
2 | import './app.css'
3 | import { MetaProvider, Title } from '@solidjs/meta'
4 | import { Router } from '@solidjs/router'
5 | import { FileRoutes } from '@solidjs/start/router'
6 | import { Suspense } from 'solid-js'
7 | import { QueryClient, QueryClientProvider } from '@tanstack/solid-query'
8 | import { ClerkProvider } from 'clerk-solidjs'
9 |
10 | export default function App() {
11 | const queryClient = new QueryClient()
12 | return (
13 | Home
Status:',"
",''];const{Video:d,play:g,pause:x,paused:r,canBeUnmuted:c,isVideoLoading:u}=i({source:"https://www.w3schools.com/html/mov_bbb.mp4",type:"video/mp4",async onFailed(e,t){console.log("called onFailed within createVideo"),e.muted=!0,await t()}}),y=()=>o(n,s(),u()?"Loading The Video..":r()?"Paused":"Playing",a(l(d,{autoplay:!0,onFailed:(e,t)=>{console.log("called onFailed within Video"),e.muted=!0,t()},get muted(){return!c()}})));export{y as default}; 2 | -------------------------------------------------------------------------------- /packages/og/src/index.tsx: -------------------------------------------------------------------------------- 1 | import { children, createMemo } from 'solid-js' 2 | import type { JSX, JSXElement, ParentProps } from 'solid-js' 3 | import { Meta } from '@solidjs/meta' 4 | import type { ImageResponseNodeOptions } from '@vercel/og/dist/types' 5 | 6 | export const DynamicImage = (_props: { 7 | children: JSX.Element | (() => JSX.Element | PromiseHello world!
25 |
39 | {`Hello ${count() * 2}!`}
40 |
41 | Home
',""],p=["
25 |
45 | )
46 | }
47 |
48 | export default Home
49 | ```
50 |
51 | [Read More Here](https://mediakit-taupe.vercel.app/video/install)
52 |
--------------------------------------------------------------------------------
/packages/prpc/solid/src/error.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import type { inferFlattenedErrors } from 'zod'
3 | import type { InferIssue, BaseSchema } from 'valibot'
4 | import { AllowedSchemas } from './types'
5 |
6 | export type ActualCauseHome
26 |27 | Status: {paused() ? 'Paused' : 'Playing'} 28 |
29 | 30 |
31 |
37 |
43 |
44 |
17 |
37 | 18 | Query 19 |
20 |{JSON.stringify(hello1.data)}
21 | 22 |23 | {myMutation.data ?? myMutation.status} 24 |
25 | 36 |
48 |
55 |
56 | 57 | Visit{' '} 58 | 59 | start.solidjs.com 60 | {' '} 61 | to learn how to build SolidStart apps. 62 |
63 |
33 | Welcome to Solid Auth
34 |
35 | {(us) => {
36 | return (
37 |
38 | Hello there {us().user?.name}
39 |
40 | )
41 | }}
42 |
43 |
44 | {(us) => {
45 | return {us()}
46 | }}
47 |
48 |
49 | )
50 | }
51 |
--------------------------------------------------------------------------------
/packages/prpc/tests/src/caller/wrapImport.output.js:
--------------------------------------------------------------------------------
1 | import { query } from '@solidjs/router'
2 | import { createCaller, callMiddleware$ } from '@solid-mediakit/prpc'
3 | import { getRequestEvent } from 'solid-js/web'
4 | import { importCaller, _$$importCaller_mws } from './withImport'
5 | import { myCaller, _$$myCaller_mws } from './withMw'
6 | export const wrappedImport = importCaller
7 | export const wrappedQuery = createCaller(
8 | query(async (_$$payload) => {
9 | 'use server'
10 | const _$$event = getRequestEvent()
11 | const ctx$ = await callMiddleware$(_$$event, _$$wrappedImport_mws)
12 | if (ctx$ instanceof Response) return ctx$
13 | return {
14 | ttt: 1,
15 | }
16 | }),
17 | {
18 | protected: false,
19 | key: 'wrappedQuery',
20 | method: 'GET',
21 | type: 'query',
22 | },
23 | )
24 | export const testCaller = myCaller
25 | export const testQuery = createCaller(
26 | query(async (_$$payload) => {
27 | 'use server'
28 | const _$$event = getRequestEvent()
29 | const ctx$ = await callMiddleware$(_$$event, _$$testCaller_mws)
30 | if (ctx$ instanceof Response) return ctx$
31 | return {
32 | lll: 1,
33 | }
34 | }),
35 | {
36 | protected: false,
37 | key: 'testQuery',
38 | method: 'GET',
39 | type: 'query',
40 | },
41 | )
42 | export const _$$wrappedImport_mws = [
43 | ..._$$importCaller_mws,
44 | ({ ctx$ }) => {
45 | return {
46 | ...ctx$,
47 | lmao: 1,
48 | }
49 | },
50 | ]
51 | export const _$$testCaller_mws = [
52 | ..._$$myCaller_mws,
53 | () => {
54 | return {
55 | delete: true,
56 | }
57 | },
58 | ]
59 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "mediakit-mono",
3 | "description": "Workspace for MediaKit",
4 | "version": "0.0.0",
5 | "scripts": {
6 | "build": "turbo run build --filter=./packages/**/*",
7 | "dev": "turbo run dev --parallel --include-dependencies --no-deps",
8 | "clean": "turbo run clean --parallel && rimraf node_modules pnpm-lock.yaml && pnpm install",
9 | "lint": "turbo run lint",
10 | "test": "turbo run test",
11 | "test:coverage": "turbo run test:coverage",
12 | "format": "prettier --write \"**.*.{ts,tsx,md}\"",
13 | "ts:check": "torbo run ts:check --continue",
14 | "dev:packages": "turbo run dev --filter=./packages/**/*"
15 | },
16 | "type": "module",
17 | "engines": {
18 | "node": ">=16",
19 | "pnpm": ">=9"
20 | },
21 | "devDependencies": {
22 | "@changesets/changelog-github": "^0.5.0",
23 | "@changesets/cli": "^2.27.7",
24 | "@rollup/plugin-babel": "^6.0.4",
25 | "@rollup/plugin-node-resolve": "^15.2.3",
26 | "@types/node": "^22.0.0",
27 | "@typescript-eslint/eslint-plugin": "^7.18.0",
28 | "@typescript-eslint/parser": "^7.18.0",
29 | "eslint": "^9.8.0",
30 | "eslint-config-prettier": "^9.1.0",
31 | "eslint-config-standard-with-typescript": "^23.0.0",
32 | "eslint-plugin-import": "^2.29.1",
33 | "eslint-plugin-n": "^17.10.1",
34 | "eslint-plugin-promise": "^7.0.0",
35 | "prettier": "^3.3.3",
36 | "rimraf": "^6.0.1",
37 | "rollup": "^4.19.1",
38 | "sort-package-json": "^2.10.0",
39 | "tslib": "^2.6.3",
40 | "turbo": "2.0.9",
41 | "typescript": "^5.5.4",
42 | "vite": "^6.2.2"
43 | },
44 | "packageManager": "pnpm@9.6.0"
45 | }
46 |
--------------------------------------------------------------------------------
/examples/auth/src/routes/discord.tsx:
--------------------------------------------------------------------------------
1 | import { Match, Switch, createSignal, type VoidComponent } from 'solid-js'
2 | import { useAuth } from '@solid-mediakit/auth/client'
3 |
4 | const Home: VoidComponent = () => {
5 | return (
6 |
19 | Loading...
}>
20 |
22 |
23 | Welcome {auth.session()?.user?.name}
24 |
25 |
31 |
32 |
19 |
52 | )
53 | }
54 |
55 | export default Home
56 |
--------------------------------------------------------------------------------
/examples/og/src/routes/solidbase.tsx:
--------------------------------------------------------------------------------
1 | import { DynamicImage, Image } from '@solid-mediakit/og'
2 | declare module "solid-js" {
3 | namespace JSX {
4 | interface HTMLAttributesHome
20 |21 | Status: 22 | {isVideoLoading() 23 | ? 'Loading The Video..' 24 | : paused() 25 | ? 'Paused' 26 | : 'Playing'} 27 |
28 |
12 |
13 |
14 |
48 |
49 |
50 | )
51 | }
52 |
--------------------------------------------------------------------------------
/examples/forms/src/routes/field.tsx:
--------------------------------------------------------------------------------
1 | import { Show, type VoidComponent } from 'solid-js'
2 | import { z } from 'zod'
3 | import { createForm } from '@solid-mediakit/forms'
4 |
5 | const styles = {
6 | inputClass: 'p-3 bg-zinc-900 rounded-lg focus:outline-none text-gray-500',
7 | labelClass: 'text-white font-bold text-lg',
8 | wrapperClass: 'flex flex-col gap-1',
9 | }
10 |
11 | const Home: VoidComponent = () => {
12 | const { testFieldErrors, TestField, validateTest } = createForm({
13 | schema: z.object({
14 | name: z.string().min(1),
15 | test: z.string().min(1),
16 | }),
17 | name: 'test',
18 | })
19 | return (
20 |
15 | 
46 |
47 |
16 |
40 |
41 |
25 | SolidBase
26 |
27 |
31 | Static Site Generation for SolidStart
32 |
33 |
37 | Fully Featured, Fully Customisable
38 |
39 |
46 |
21 |
22 | {(e) => {
23 | return
26 |
49 |
50 | )
51 | }
52 |
53 | export default Home
54 |
--------------------------------------------------------------------------------
/examples/prpc-clerk/src/routes/index.tsx:
--------------------------------------------------------------------------------
1 | import { type VoidComponent } from 'solid-js'
2 | import { getRequest, mutationTest3 } from '~/use/use'
3 | import '~/use/file1'
4 | import '~/use/file2'
5 | import { callTest } from '~/use/test'
6 | import { SignIn, SignedIn, SignedOut } from 'clerk-solidjs'
7 |
8 | const Home: VoidComponent = () => {
9 | const hello1 = getRequest(() => ({ test: 'ok' }))
10 | callTest(() => ({ test: '1' }))
11 | const myMutation = mutationTest3(() => ({
12 | onSuccess(data, variables) {
13 | console.log(data, variables)
14 | },
15 | }))
16 |
17 | return (
18 | {JSON.stringify(e(), null, 2)}
24 | }}
25 |
20 |
40 | 21 | Query 22 |
23 |{JSON.stringify(hello1.data)}
24 | 25 |26 | {myMutation.data ?? myMutation.status} 27 |
28 | 39 |
42 |
44 |