diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2022-06-30 14:09:09 -0400 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2022-06-30 13:09:09 -0500 |
| commit | 032ad1c047a62dd663067cc562537d16f2872aa7 (patch) | |
| tree | edc4803ad3b9a9418f064dbaf54e40903f585dbd /examples/with-mdx/src | |
| parent | 91635f05df207d33ee8b50a2afe970b94b24ba7b (diff) | |
| download | astro-032ad1c047a62dd663067cc562537d16f2872aa7.tar.gz astro-032ad1c047a62dd663067cc562537d16f2872aa7.tar.zst astro-032ad1c047a62dd663067cc562537d16f2872aa7.zip | |
MDX support (#3706)
* feat: first pass at MDX support
* fix: move built-in JSX renderer to come first
* chore: remove jsx example
* chore: update lockfile
* chore: cleanup example
* fix: missing deps
* refactor: move component render logic to `renderPage`
* chore: update HMR script
* chore: update MDX example
* refactor: prefer unshit
* refactor: remove TODO comment
* fix: remove duplicate identifier
* refactor: cleanup mdx entrypoint
* fix: better html handling
* fix: add tsconfig to mdx package
* chore: update lockfile
* fix: do not sort plugins unless mdx is enabled
* chore: update compiler
* fix(hmr): maybe render head for non-Astro pages
* fix: set initial pageExtensions
* refactor: cleanup addPageExtension
* refactor: remove addPageExtensions from types
* refactor: expose HookParameters type
* fix: only default to astro for MDX
* test: pick up jsx support in test fixtures
* refactor: simplify mdx entrypoint
* test: add basic MDX tests
* test(e2e): add mdx + framework tests
* chore: update lockfile
* test(e2e): fix preact mdx e2e test
* fix(mdx): disable .md support
* test(e2e): fix vue-component test missing mdx
* test(e2e): fix solid component needing import
* fix: allow `client:only="solid"` as an alias to `solid-js`
* chore: move to with-mdx example
* chore: update MDX readme
* chore: update example readme
* chore: bump astro version
* chore: update lockfile
* Update mod.d.ts
* feat: support `export const components` in MDX pages
* chore: update mdx example
* fix: update jsx-runtime with better slot support
* refactor: remove object style support
* chore: cleanup package exports
* chore: add todo comment
* refactor: improve isPage function, move to utils
* refactor: dry up manual HMR updates
* chore: add dev tests for MDX
* chore: prefer set to array
* chore: add changesets
* fix(hmr): flip public/private route
Co-authored-by: Nate Moore <nate@astro.build>
Diffstat (limited to 'examples/with-mdx/src')
| -rw-r--r-- | examples/with-mdx/src/components/Counter.jsx | 18 | ||||
| -rw-r--r-- | examples/with-mdx/src/components/Title.astro | 7 | ||||
| -rw-r--r-- | examples/with-mdx/src/pages/index.mdx | 19 |
3 files changed, 44 insertions, 0 deletions
diff --git a/examples/with-mdx/src/components/Counter.jsx b/examples/with-mdx/src/components/Counter.jsx new file mode 100644 index 000000000..801eefe73 --- /dev/null +++ b/examples/with-mdx/src/components/Counter.jsx @@ -0,0 +1,18 @@ +import { useState } from 'preact/hooks'; + +export default function Counter({ children }) { + const [count, setCount] = useState(0); + const add = () => setCount((i) => i + 1); + const subtract = () => setCount((i) => i - 1); + + return ( + <> + <div class="counter"> + <button onClick={subtract}>-</button> + <pre>{count}</pre> + <button onClick={add}>+</button> + </div> + <div class="counter-message">{children}</div> + </> + ); +} diff --git a/examples/with-mdx/src/components/Title.astro b/examples/with-mdx/src/components/Title.astro new file mode 100644 index 000000000..6d0dcb86c --- /dev/null +++ b/examples/with-mdx/src/components/Title.astro @@ -0,0 +1,7 @@ +<h1><slot /></h1> + +<style> + h1 { + color: red; + } +</style> diff --git a/examples/with-mdx/src/pages/index.mdx b/examples/with-mdx/src/pages/index.mdx new file mode 100644 index 000000000..e541df27c --- /dev/null +++ b/examples/with-mdx/src/pages/index.mdx @@ -0,0 +1,19 @@ +import Counter from '../components/Counter.jsx' +import Title from '../components/Title.astro' +export const components = { h1: Title } + +# Hello world! + +export const authors = [ + {name: 'Jane', email: 'hi@jane.com'}, + {name: 'John', twitter: '@john2002'} +] +export const published = new Date('2022-02-01') + +Written by: {new Intl.ListFormat('en').format(authors.map(d => d.name))}. + +Published on: {new Intl.DateTimeFormat('en', {dateStyle: 'long'}).format(published)}. + +<Counter client:idle> +## Counter +</Counter> |