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

Add example with changesets and publishing #1098

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 6 commits into from
Apr 22, 2022
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
8 changes: 8 additions & 0 deletions examples/with-changesets/.changeset/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
# Changesets

Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
with multi-package repos, or single-package repos to help you version and publish your code. You can
find the full documentation for it [in our repository](https://github.com/changesets/changesets)

We have a quick list of common questions to get you started engaging with this project in
[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)
11 changes: 11 additions & 0 deletions examples/with-changesets/.changeset/config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json",
"changelog": "@changesets/cli/changelog",
"commit": false,
"fixed": [],
"linked": [],
"access": "public",
"baseBranch": "main",
"updateInternalDependencies": "patch",
"ignore": ["@acme/docs"]
}
1 change: 1 addition & 0 deletions examples/with-changesets/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("./packages/eslint-preset-acme");
42 changes: 42 additions & 0 deletions examples/with-changesets/.github/workflows/release.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
name: Release

on:
push:
branches:
- master

concurrency: ${{ github.workflow }}-${{ github.ref }}

jobs:
release:
name: Release
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@v2
with:
# This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
fetch-depth: 0

- name: Setup Node.js 16.x
uses: actions/setup-node@v2
with:
node-version: 16.x

- name: Install Dependencies
run: yarn

- name: Create Release Pull Request or Publish to npm
id: changesets
uses: changesets/action@v1
with:
# This expects you to have a script called release which does a build for your packages and calls changeset publish
publish: yarn release
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

- name: Send a Slack notification if a publish happens
if: steps.changesets.outputs.published == 'true'
# You can do something when a publish happens.
run: my-slack-bot send-notification --message "A new version of ${GITHUB_REPOSITORY} was published!"
13 changes: 13 additions & 0 deletions examples/with-changesets/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
.DS_Store
node_modules
.turbo
*.log
.next
dist
dist-ssr
*.local
.env
.cache
server/dist
public/dist
.turbo
76 changes: 76 additions & 0 deletions examples/with-changesets/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
# Turborepo Design System starter with Changesets

This is an official React design system starter powered by Turborepo. Versioning and package publishing is handled by [Changesets](https://github.com/changesets/changesets) and fully automated with GitHub Actions.

## What's inside?

This Turborepo includes the following:

### Apps and Packages

- `docs`: A placeholder documentation site powered by [Next.js](https://nextjs.org)
- `@acme/core`: core React components
- `@acme/utils`: shared React utilities
- `@acme/tsconfig`: shared `tsconfig.json`s used throughout the monorepo
- `eslint-preset-acme`: ESLint preset

Each package and app is 100% [Typescript](https://www.typescriptlang.org/).

### Utilities

This turborepo has some additional tools already setup for you:

- [Typescript](https://www.typescriptlang.org/) for static type checking
- [ESLint](https://eslint.org/) for code linting
- [Prettier](https://prettier.io) for code formatting

## Using this example

Run the following command:

```sh
npx degit vercel/turborepo/examples/design-system design-system
cd design-system
yarn install
git init . && git add . && git commit -m "Init"
```

### Useful commands

- `yarn build` - Build all packages and the docs site
- `yarn dev` - Develop all packages and the docs site
- `yarn lint` - Lint all packages
- `yarn changeset` - Generate a changeset
- `yarn clean` - Clean up all `node_modules` and `dist` folders (runs each package's clean script)

### Changing the NPM organization scope

The NPM organization scope for this design system starter is `@acme`. To change this, it's a bit manual at the moment, but you'll need to do the following:

- Rename folders in `packages/*` to replace `acme` with your desired scope
- Search and replace `acme` with your desired scope
- Re-run `yarn install`

## Versioning and Publishing packages

Package publishing has been configured using [Changesets](https://github.com/changesets/changesets). Please review their [documentation](https://github.com/changesets/changesets#documentation) to familarize yourself with the workflow.

This example comes with automated npm releases setup in a [GitHub Action](https://github.com/changesets/action). To get this working, you will need to create an `NPM_TOKEN` and `GITHUB_TOKEN` in your repository settings. You should also install the [Changesets bot](https://github.com/apps/changeset-bot) on your GitHub repository as well.

For more information about this automation, refer to the official [changesets documentation](https://github.com/changesets/changesets/blob/main/docs/automating-changesets.md)

### npm

If you want to publish package to the public npm registry and make them publicly available, this is already setup.

To publish packages to a private npm organization scope, **remove** the following from each of the `package.json`'s

```diff
- "publishConfig": {
- "access": "public"
- },
```

### GitHub Package Registry

See [Working with the npm registry](https://docs.github.com/en/packages/working-with-a-github-packages-registry/working-with-the-npm-registry#publishing-a-package-using-publishconfig-in-the-packagejson-file)
1 change: 1 addition & 0 deletions examples/with-changesets/apps/docs/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("eslint-preset-acme");
5 changes: 5 additions & 0 deletions examples/with-changesets/apps/docs/next-env.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
/// <reference types="next" />
/// <reference types="next/image-types/global" />

// NOTE: This file should not be edited
// see https://nextjs.org/docs/basic-features/typescript for more information.
3 changes: 3 additions & 0 deletions examples/with-changesets/apps/docs/next.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
module.exports = {
reactStrictMode: true,
};
27 changes: 27 additions & 0 deletions examples/with-changesets/apps/docs/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
{
"name": "@acme/docs",
"version": "0.0.0",
"private": true,
"scripts": {
"build": "next build",
"start": "next start ",
"dev": "next dev -p 3002",
"lint": "TIMING=1 next lint",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf .next"
},
"dependencies": {
"@acme/core": "*",
"@acme/utils": "*",
"next": "^12.0.8",
"react": "^17.0.2",
"react-dom": "^17.0.2"
},
"devDependencies": {
"@acme/tsconfig": "*",
"@types/node": "^17.0.12",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"eslint-preset-acme": "*",
"typescript": "^4.5.4"
}
}
14 changes: 14 additions & 0 deletions examples/with-changesets/apps/docs/src/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Button } from "@acme/core";
import { useIsomorphicLayoutEffect } from "@acme/utils";

export default function Docs() {
useIsomorphicLayoutEffect(() => {
console.log("Acme docs page");
}, []);
return (
<div>
<h1>Acme Documentation</h1>
<Button>Click me</Button>
</div>
);
}
10 changes: 10 additions & 0 deletions examples/with-changesets/apps/docs/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
{
"exclude": ["node_modules"],
"extends": "@acme/tsconfig/nextjs.json",
"compilerOptions": {
"rootDir": "src",
"outDir": "dist",
"incremental": true
},
"include": ["src", "next-env.d.ts"]
}
23 changes: 23 additions & 0 deletions examples/with-changesets/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
{
"private": true,
"workspaces": [
"packages/*",
"apps/*"
],
"scripts": {
"build": "turbo run build",
"dev": "turbo run dev --no-cache --parallel --continue",
"lint": "turbo run lint",
"clean": "turbo run clean && rm -rf node_modules",
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
"changeset": "changeset",
"version-packages": "changeset version",
"release": "turbo run build --filter=docs^... && changeset publish"
},
"devDependencies": {
"@changesets/cli": "^2.22.0",
"eslint": "7.32.0",
"prettier": "^2.5.1",
"turbo": "latest"
}
}
1 change: 1 addition & 0 deletions examples/with-changesets/packages/acme-core/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("eslint-preset-acme");
30 changes: 30 additions & 0 deletions examples/with-changesets/packages/acme-core/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
{
"name": "@acme/core",
"version": "0.0.0",
"main": "./dist/index.js",
"module": "./dist/index.mjs",
"types": "./dist/index.d.ts",
"sideEffects": false,
"license": "MIT",
"files": [
"dist/**"
],
"scripts": {
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
"dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
"lint": "TIMING=1 eslint src --fix",
"clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
},
"devDependencies": {
"@acme/tsconfig": "*",
"eslint-preset-acme": "*",
"@types/react": "^17.0.13",
"@types/react-dom": "^17.0.8",
"react": "^17.0.2",
"tsup": "^5.10.1",
"typescript": "^4.5.3"
},
"publishConfig": {
"access": "public"
}
}
11 changes: 11 additions & 0 deletions examples/with-changesets/packages/acme-core/src/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import * as React from "react";

export interface ButtonProps {
children: React.ReactNode;
}

export function Button(props: ButtonProps) {
return <button>{props.children}</button>;
}

Button.displayName = "Button";
2 changes: 2 additions & 0 deletions examples/with-changesets/packages/acme-core/src/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import * as React from "react";
export { Button, type ButtonProps } from "./Button";
5 changes: 5 additions & 0 deletions examples/with-changesets/packages/acme-core/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"extends": "@acme/tsconfig/react-library.json",
"include": ["."],
"exclude": ["dist", "build", "node_modules"]
}
20 changes: 20 additions & 0 deletions examples/with-changesets/packages/acme-tsconfig/base.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Default",
"compilerOptions": {
"composite": false,
"declaration": true,
"declarationMap": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"inlineSources": false,
"isolatedModules": true,
"moduleResolution": "node",
"noUnusedLocals": false,
"noUnusedParameters": false,
"preserveWatchOutput": true,
"skipLibCheck": true,
"strict": true
},
"exclude": ["node_modules"]
}
20 changes: 20 additions & 0 deletions examples/with-changesets/packages/acme-tsconfig/nextjs.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Next.js",
"extends": "./base.json",
"compilerOptions": {
"target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"noEmit": true,
"module": "esnext",
"resolveJsonModule": true,
"isolatedModules": true,
"incremental": true,
"jsx": "preserve",
"rootDir": "src"
},
"include": ["src", "next-env.d.ts"],
"exclude": ["node_modules"]
}
14 changes: 14 additions & 0 deletions examples/with-changesets/packages/acme-tsconfig/node14.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "Node 14",
"extends": "./base.json",
"compilerOptions": {
"lib": ["es2020"],
"module": "commonjs",
"target": "es2020",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
15 changes: 15 additions & 0 deletions examples/with-changesets/packages/acme-tsconfig/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{
"name": "@acme/tsconfig",
"version": "0.0.0",
"license": "MIT",
"main": "index.js",
"files": [
"base.json",
"node14.json",
"nextjs.json",
"react-library.json"
],
"publishConfig": {
"access": "public"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"$schema": "https://json.schemastore.org/tsconfig",
"display": "React Library",
"extends": "./base.json",
"compilerOptions": {
"lib": ["dom", "ES2015"],
"module": "ESNext",
"target": "ES6",
"jsx": "react-jsx"
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
module.exports = require("eslint-preset-acme");
Loading