这是indexloc提供的服务,不要输入任何密码
Skip to content

feat(examples): add example with-solid #10144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 13 commits into from
Mar 11, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions examples/with-solid/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# Dependencies
node_modules
.pnp
.pnp.js
.npmrc

# Local env files
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

# Testing
coverage

# Turbo
.turbo

# Vercel
.vercel

# Build Outputs
.next/
out/
build
dist


# Debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Misc
.vscode
.DS_Store
*.pem
97 changes: 97 additions & 0 deletions examples/with-solid/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
# Solid-Turborepo Starter

A modern Turborepo starter for building SolidJS applications with a complete development setup. This starter comes equipped with the pnpm package manager, Vinxi Bundler foroptimized builds, Tailwind CSS v4 for styling and ESLint for code quality.

---

## Table of Contents

- [Overview](#overview)
- [Getting Started](#getting-started)
- [What's Inside?](#whats-inside)
- [Build & Develop](#build--develop)
- [Remote Caching](#remote-caching)
- [Useful Links](#useful-links)
- [License](#license)

## Overview

This starter project leverages Turborepo to manage a monorepo structure that combines a SolidJS application with shared component libraries and configuration packages. It provides a robust setup for modern web development:

## Getting Started

To bootstrap your new turborepo using this starter, simply run:

```sh
npx create-turbo@latest
```

## What's inside?

This Turborepo includes the following packages/apps:

### Apps and Packages

- `docs`: a [Solid Start](https://start.solidjs.com/) app
- `web`: a [Solid Start](https://start.solidjs.com/) app
- `@repo/ui`: a stub Solid component library shared by both `solid` applications
- `@repo/eslint-config`: `eslint` configurations
- `@repo/tailwind-config`: [Tailwind](https://tailwindcss.com/) v4 configurations
- `vinxi`: [Vinxi](https://vinxi.vercel.app/) Bundler\*\* for efficient bundling.

## Build & Develop

### Build

To build all apps and packages, run the following command:

```
cd with-solid
pnpm run build
```

### Develop

To develop all apps and packages, run the following command:

```
cd with-solid
pnpm run dev
```

### Remote Caching

> [!TIP]
> Vercel Remote Cache is free for all plans. Get started today at [vercel.com](https://vercel.com/signup?/signup?utm_source=remote-cache-sdk&utm_campaign=free_remote_cache).

Turborepo can use a technique known as [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching) to share cache artifacts across machines, enabling you to share build caches with your team and CI/CD pipelines.

By default, Turborepo will cache locally. To enable Remote Caching you will need an account with Vercel. If you don't have an account you can [create one](https://vercel.com/signup?utm_source=turborepo-examples), then enter the following commands:

```
cd with-solid
npx turbo login
```

This will authenticate the Turborepo CLI with your [Vercel account](https://vercel.com/docs/concepts/personal-accounts/overview).

Next, you can link your Turborepo to your Remote Cache by running the following command from the root of your Turborepo:

```
npx turbo link
```

## Useful Links

Learn more about the power of Turborepo:

- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)
- [Caching](https://turbo.build/repo/docs/core-concepts/caching)
- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)
- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)
- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)
- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)

## License

This project is licensed under the MIT License.
28 changes: 28 additions & 0 deletions examples/with-solid/apps/docs/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
dist
.solid
.output
.vercel
.netlify
.vinxi
app.config.timestamp_*.js

# Environment
.env
.env*.local

# dependencies
/node_modules

# IDEs and editors
/.idea
.project
.classpath
*.launch
.settings/

# Temp
gitignore

# System Files
.DS_Store
Thumbs.db
42 changes: 42 additions & 0 deletions examples/with-solid/apps/docs/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
# SolidStart

Everything you need to build a Solid project, powered by [`solid-start`](https://start.solidjs.com);

## Creating a project

```bash
# create a new project in the current directory
npm init solid@latest

# create a new project in my-app
npm init solid@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

Solid apps are built with _presets_, which optimise your project for deployment to different environments.

By default, `npm run build` will generate a Node app that you can run with `npm start`. To use a different preset, add it to the `devDependencies` in `package.json` and specify in your `app.config.js`.

## Testing

Tests are written with `vitest`, `@solidjs/testing-library` and `@testing-library/jest-dom` to extend expect with some helpful custom matchers.

To run them, simply start:

```sh
npm test
```

## This project was created with the [Solid CLI](https://solid-cli.netlify.app)
10 changes: 10 additions & 0 deletions examples/with-solid/apps/docs/app.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { defineConfig } from "@solidjs/start/config";
import tailwindcss from "@tailwindcss/vite";

export default defineConfig({
vite: {
plugins: [
tailwindcss()
]
}
});
3 changes: 3 additions & 0 deletions examples/with-solid/apps/docs/eslint.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
import { config } from '@repo/eslint-config/index.ts';

export default config;
34 changes: 34 additions & 0 deletions examples/with-solid/apps/docs/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
{
"name": "docs",
"scripts": {
"dev": "vinxi dev",
"build": "vinxi build",
"start": "vinxi start",
"test": "vitest run",
"test-watch": "vitest",
"test-ui": "vitest --ui"
},
"type": "module",
"dependencies": {
"@repo/ui": "workspace:*",
"@tailwindcss/vite": "^4.0.9",
"tailwindcss": "^4.0.9"
},
"devDependencies": {
"@repo/eslint-config": "workspace:*",
"@repo/tailwind-config": "workspace:*",
"@solidjs/meta": "^0.29.4",
"@solidjs/router": "^0.15.0",
"@solidjs/start": "^1.1.0",
"@solidjs/testing-library": "^0.8.10",
"@testing-library/jest-dom": "^6.6.2",
"@testing-library/user-event": "^14.5.2",
"@vitest/ui": "3.0.5",
"jsdom": "^25.0.1",
"solid-js": "^1.9.3",
"typescript": "^5.6.3",
"vinxi": "^0.5.3",
"vite-plugin-solid": "^2.11.6",
"vitest": "3.0.5"
}
}
Binary file added examples/with-solid/apps/docs/public/favicon.ico
Binary file not shown.
5 changes: 5 additions & 0 deletions examples/with-solid/apps/docs/src/app.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
@import 'tailwindcss';
@import '@repo/tailwind-config/styles.css';


@source '../../../packages/ui';
20 changes: 20 additions & 0 deletions examples/with-solid/apps/docs/src/app.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { MetaProvider, Title } from "@solidjs/meta";
import { Router } from "@solidjs/router";
import { FileRoutes } from "@solidjs/start/router";
import { Suspense } from "solid-js";
import "./app.css";

export default function App() {
return (
<Router
root={props => (
<MetaProvider>
<Title>SolidStart - with Vitest</Title>
<Suspense>{props.children}</Suspense>
</MetaProvider>
)}
>
<FileRoutes />
</Router>
);
}
21 changes: 21 additions & 0 deletions examples/with-solid/apps/docs/src/components/Counter.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.increment {
font-family: inherit;
font-size: inherit;
padding: 1em 2em;
color: #335d92;
background-color: rgba(68, 107, 158, 0.1);
border-radius: 2em;
border: 2px solid rgba(68, 107, 158, 0);
outline: none;
width: 200px;
font-variant-numeric: tabular-nums;
cursor: pointer;
}

.increment:focus {
border: 2px solid #335d92;
}

.increment:active {
background-color: rgba(68, 107, 158, 0.2);
}
15 changes: 15 additions & 0 deletions examples/with-solid/apps/docs/src/components/Counter.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { describe, it, expect } from 'vitest';
import { render } from "@solidjs/testing-library";
import userEvent from "@testing-library/user-event";
import Counter from "./Counter";

describe("<Counter />", () => {
it("increments value", async () => {
const { queryByRole } = render(() => <Counter />);
const button = queryByRole("button") as HTMLButtonElement;
expect(button).toBeInTheDocument();
expect(button).toHaveTextContent(/Clicks: 0/);
await userEvent.click(button);
expect(button).toHaveTextContent(/Clicks: 1/);
});
});
15 changes: 15 additions & 0 deletions examples/with-solid/apps/docs/src/components/Counter.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import { createSignal } from "solid-js";
import "./Counter.css";
import { Button } from "@repo/ui";

export default function Counter() {
const [count, setCount] = createSignal(0);
return (
<Button
class=" bg-black text-white w-fit"
onClick={() => setCount(count() + 1)}
type="button">
Docs Clicks: {count()}
</Button>
);
}
4 changes: 4 additions & 0 deletions examples/with-solid/apps/docs/src/entry-client.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
// @refresh reload
import { mount, StartClient } from "@solidjs/start/client";

mount(() => <StartClient />, document.getElementById("app")!);
21 changes: 21 additions & 0 deletions examples/with-solid/apps/docs/src/entry-server.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
// @refresh reload
import { createHandler, StartServer } from "@solidjs/start/server";

export default createHandler(() => (
<StartServer
document={({ assets, children, scripts }) => (
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
{assets}
</head>
<body>
<div id="app">{children}</div>
{scripts}
</body>
</html>
)}
/>
));
1 change: 1 addition & 0 deletions examples/with-solid/apps/docs/src/global.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
/// <reference types="solid-start/env" />
Loading
Loading