From 033b70a7f8726e1b2cd365cbfe03fbf67a1e6a35 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Fri, 17 Dec 2021 08:47:59 -0500 Subject: [PATCH] Add Component Example (#2203) * Add Component Example * chore(lint): Prettier fix * nit: improve implementation * nit: Update documentation Co-authored-by: github-actions[bot] --- examples/component/.gitignore | 18 +++++++ examples/component/.npmrc | 2 + examples/component/.stackblitzrc | 6 +++ examples/component/README.md | 45 ++++++++++++++++++ examples/component/astro.config.mjs | 13 +++++ examples/component/demo/package.json | 14 ++++++ examples/component/demo/public/favicon.ico | Bin 0 -> 4286 bytes examples/component/demo/public/robots.txt | 2 + examples/component/demo/src/pages/index.astro | 29 +++++++++++ examples/component/package.json | 17 +++++++ .../packages/my-component/Button.astro | 15 ++++++ .../packages/my-component/Heading.astro | 18 +++++++ .../component/packages/my-component/README.md | 37 ++++++++++++++ .../component/packages/my-component/index.js | 2 + .../packages/my-component/package.json | 22 +++++++++ examples/component/sandbox.config.json | 11 +++++ package.json | 2 + 17 files changed, 253 insertions(+) create mode 100644 examples/component/.gitignore create mode 100644 examples/component/.npmrc create mode 100644 examples/component/.stackblitzrc create mode 100644 examples/component/README.md create mode 100644 examples/component/astro.config.mjs create mode 100644 examples/component/demo/package.json create mode 100644 examples/component/demo/public/favicon.ico create mode 100644 examples/component/demo/public/robots.txt create mode 100644 examples/component/demo/src/pages/index.astro create mode 100644 examples/component/package.json create mode 100644 examples/component/packages/my-component/Button.astro create mode 100644 examples/component/packages/my-component/Heading.astro create mode 100644 examples/component/packages/my-component/README.md create mode 100644 examples/component/packages/my-component/index.js create mode 100644 examples/component/packages/my-component/package.json create mode 100644 examples/component/sandbox.config.json diff --git a/examples/component/.gitignore b/examples/component/.gitignore new file mode 100644 index 000000000..d436c6dad --- /dev/null +++ b/examples/component/.gitignore @@ -0,0 +1,18 @@ +# build output +dist + +# dependencies +node_modules/ +.snowpack/ + +# logs +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# environment variables +.env +.env.production + +# macOS-specific files +.DS_Store diff --git a/examples/component/.npmrc b/examples/component/.npmrc new file mode 100644 index 000000000..65922326b --- /dev/null +++ b/examples/component/.npmrc @@ -0,0 +1,2 @@ +## force pnpm to hoist +shamefully-hoist = true diff --git a/examples/component/.stackblitzrc b/examples/component/.stackblitzrc new file mode 100644 index 000000000..43798ecff --- /dev/null +++ b/examples/component/.stackblitzrc @@ -0,0 +1,6 @@ +{ + "startCommand": "npm start", + "env": { + "ENABLE_CJS_IMPORTS": true + } +} \ No newline at end of file diff --git a/examples/component/README.md b/examples/component/README.md new file mode 100644 index 000000000..76492bd28 --- /dev/null +++ b/examples/component/README.md @@ -0,0 +1,45 @@ +# Astro Starter Kit: Component + +``` +npm init astro -- --template component +``` + +[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/component) + +> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! + +## 🚀 Project Structure + +Inside of your Astro project, you'll see the following folders and files: + +``` +/ +├── demo/ +│ ├── public/ +│ └── src/ +│ └── pages/ +│ └── index.astro +└── packages/ + └── my-component/ + ├── index.js + └── package.json +``` + +This project uses **workspaces** to develop a single package, `@example/my-component`, from `packages/my-component`. It also includes a `demo` Astro site for testing and demonstrating the component. + + + +## 🧞 Commands + +All commands are run from the root of the project, from a terminal: + +| Command | Action | +|:---------------- |:-------------------------------------------- | +| `npm install` | Installs dependencies | +| `npm run dev` | Starts local dev server at `localhost:3000` | +| `npm run build` | Build your production site to `./dist/` | +| `npm run preview` | Preview your build locally, before deploying | + +## 👀 Want to learn more? + +Feel free to check [our documentation](https://github.com/withastro/astro) or jump into our [Discord server](https://astro.build/chat). diff --git a/examples/component/astro.config.mjs b/examples/component/astro.config.mjs new file mode 100644 index 000000000..94846abde --- /dev/null +++ b/examples/component/astro.config.mjs @@ -0,0 +1,13 @@ +// Full Astro Configuration API Documentation: +// https://docs.astro.build/reference/configuration-reference + +// @type-check enabled! +// VSCode and other TypeScript-enabled text editors will provide auto-completion, +// helpful tooltips, and warnings if your exported object is invalid. +// You can disable this by removing "@ts-check" and `@type` comments below. + +// @ts-check +export default /** @type {import('astro').AstroUserConfig} */ ({ + // Comment out "renderers: []" to enable Astro's default component support. + renderers: [], +}); diff --git a/examples/component/demo/package.json b/examples/component/demo/package.json new file mode 100644 index 000000000..575002652 --- /dev/null +++ b/examples/component/demo/package.json @@ -0,0 +1,14 @@ +{ + "name": "@example/my-component-demo", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "astro preview" + }, + "devDependencies": { + "astro": "^0.21.11" + } +} diff --git a/examples/component/demo/public/favicon.ico b/examples/component/demo/public/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..578ad458b8906c08fbed84f42b045fea04db89d1 GIT binary patch literal 4286 zcmchZF=!M)6ox0}Fc8GdTHG!cdIY>nA!3n2f|wxIl0rn}Hl#=uf>?-!2r&jMEF^_k zh**lGut*gwBmoNv7AaB&2~nbzULg{WBhPQ{ZVzvF_HL8Cb&hv$_s#qN|IO^o>?+mA zuTW6tU%k~z<&{z+7$G%*nRsTcEO|90xy<-G5&JTt%CgZZCDT4%R?+{Vd^wh>P8_)} z`+dF$HQb9!>1o`Ivn;GInlCw{9T@Rt%q+d^T3Ke%cxkk;$v`{s^zCB9nHAv6w$Vbn z8fb<+eQTNM`;rf9#obfGnV#3+OQEUv4gU;{oA@zol%keY9-e>4W>p7AHmH~&!P7f7!Uj` zwgFeQ=<3G4O;mwWO`L!=R-=y3_~-DPjH3W^3f&jjCfC$o#|oGaahSL`_=f?$&Aa+W z2h8oZ+@?NUcjGW|aWJfbM*ZzxzmCPY`b~RobNrrj=rd`=)8-j`iSW64@0_b6?;GYk zNB+-fzOxlqZ?`y{OA$WigtZXa8)#p#=DPYxH=VeC_Q5q9Cv`mvW6*zU&Gnp1;oPM6 zaK_B3j(l^FyJgYeE9RrmDyhE7W2}}nW%ic#0v@i1E!yTey$W)U>fyd+!@2hWQ!Wa==NAtKoj`f3tp4y$Al`e;?)76?AjdaRR>|?&r)~3Git> zb1)a?uiv|R0_{m#A9c;7)eZ1y6l@yQ#oE*>(Z2fG-&&smPa2QTW>m*^K65^~`coP$ z8y5Y?iS<4Gz{Zg##$1mk)u-0;X|!xu^FCr;ce~X<&UWE&pBgqfYmEJTzpK9I%vr%b z3Ksd6qlPJLI%HFfeXK_^|BXiKZC>Ocu(Kk6hD3G-8usLzVG^q00Qh gz)s7ge@$ApxGu7=(6IGIk+uG&HTev01^#CH3$(Wk5&!@I literal 0 HcmV?d00001 diff --git a/examples/component/demo/public/robots.txt b/examples/component/demo/public/robots.txt new file mode 100644 index 000000000..1f53798bb --- /dev/null +++ b/examples/component/demo/public/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / diff --git a/examples/component/demo/src/pages/index.astro b/examples/component/demo/src/pages/index.astro new file mode 100644 index 000000000..96ca814e3 --- /dev/null +++ b/examples/component/demo/src/pages/index.astro @@ -0,0 +1,29 @@ +--- +import * as Component from '@example/my-component' +--- + + + + + + Welcome to Astro + + + + + + Welcome to Astro + + + Plain Button + + + + \ No newline at end of file diff --git a/examples/component/package.json b/examples/component/package.json new file mode 100644 index 000000000..84fe15ec4 --- /dev/null +++ b/examples/component/package.json @@ -0,0 +1,17 @@ +{ + "name": "@example/component", + "version": "0.0.1", + "private": true, + "workspaces": [ + "demo", + "packages/*" + ], + "scripts": { + "start": "astro --project-root demo dev", + "build": "astro --project-root demo build", + "serve": "astro --project-root demo preview" + }, + "devDependencies": { + "astro": "^0.21.11" + } +} diff --git a/examples/component/packages/my-component/Button.astro b/examples/component/packages/my-component/Button.astro new file mode 100644 index 000000000..d853628a1 --- /dev/null +++ b/examples/component/packages/my-component/Button.astro @@ -0,0 +1,15 @@ +--- +export interface Props extends Record { + type?: string +} + +const { + type, + ...props +} = { + ...Astro.props +} as Props + +props.type = type || 'button' +--- + \ No newline at end of file diff --git a/examples/component/packages/my-component/Heading.astro b/examples/component/packages/my-component/Heading.astro new file mode 100644 index 000000000..f27e74b3d --- /dev/null +++ b/examples/component/packages/my-component/Heading.astro @@ -0,0 +1,18 @@ +--- +export interface Props extends Record { + level?: number | string + role?: string +} + +const { + level, + role, + ...props +} = { + ...Astro.props +} as Props + +props.role = role || 'heading' +props['aria-level'] = level || '1' +--- + \ No newline at end of file diff --git a/examples/component/packages/my-component/README.md b/examples/component/packages/my-component/README.md new file mode 100644 index 000000000..41a53a6f0 --- /dev/null +++ b/examples/component/packages/my-component/README.md @@ -0,0 +1,37 @@ +# Example `@example/my-component` + +This is an example package, exported as `@example/my-component`. It consists of two Astro components, **Button** and **Heading**. + +### Button + +The **Button** component generates a ` +``` + +### Heading + +The **Heading** component generates an `` tag with a default **role** of **heading** and a **level** attribute that gets written to **aria-level**. + +```astro +--- +import * as Component from '@example/my-component' +--- +Heading +Subheading +``` + +```html + +Plain Button +Subheading +``` diff --git a/examples/component/packages/my-component/index.js b/examples/component/packages/my-component/index.js new file mode 100644 index 000000000..603a81a96 --- /dev/null +++ b/examples/component/packages/my-component/index.js @@ -0,0 +1,2 @@ +export { default as Button } from './Button.astro'; +export { default as Heading } from './Heading.astro'; diff --git a/examples/component/packages/my-component/package.json b/examples/component/packages/my-component/package.json new file mode 100644 index 000000000..47212b558 --- /dev/null +++ b/examples/component/packages/my-component/package.json @@ -0,0 +1,22 @@ +{ + "name": "@example/my-component", + "version": "0.0.1", + "private": true, + "type": "module", + "exports": { + ".": "./index.js", + "./Button": "./Button.astro", + "./Heading": "./Heading.astro" + }, + "files": [ + "index.js", + "Button.astro", + "Heading.jsx" + ], + "keywords": [ + "astro-component", + "button", + "heading", + "example" + ] +} diff --git a/examples/component/sandbox.config.json b/examples/component/sandbox.config.json new file mode 100644 index 000000000..9178af77d --- /dev/null +++ b/examples/component/sandbox.config.json @@ -0,0 +1,11 @@ +{ + "infiniteLoopProtection": true, + "hardReloadOnChange": false, + "view": "browser", + "template": "node", + "container": { + "port": 3000, + "startScript": "start", + "node": "14" + } +} diff --git a/package.json b/package.json index c4b424a43..baca6f7ed 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,8 @@ "packages/renderers/*", "packages/*", "examples/*", + "examples/component/demo", + "examples/component/packages/*", "scripts", "www", "docs",