diff --git a/.changeset/config.json b/.changeset/config.json index b693389f..1d84f6e2 100644 --- a/.changeset/config.json +++ b/.changeset/config.json @@ -6,5 +6,5 @@ "access": "public", "baseBranch": "master", "updateInternalDependencies": "patch", - "ignore": ["mdsvex-playground"] + "ignore": ["@mdsvex/site"] } diff --git a/.github/dependabot.yml b/.github/dependabot.yml new file mode 100644 index 00000000..7a1347e4 --- /dev/null +++ b/.github/dependabot.yml @@ -0,0 +1,20 @@ +# To get started with Dependabot version updates, you'll need to specify which +# package ecosystems to update and where the package manifests are located. +# Please see the documentation for all configuration options: +# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file + +version: 2 +updates: + - package-ecosystem: "pnpm" + directories: + - "packages/*" + schedule: + interval: "weekly" + commit-message: + prefix: "[npm] " + - package-ecosystem: "github-actions" + directory: "/" # dependsabot magically works this out for actions + schedule: + interval: "weekly" + commit-message: + prefix: "[gha] " diff --git a/.github/workflows/mdsvex.yaml b/.github/workflows/mdsvex.yaml index 5fde22fc..99ba4730 100644 --- a/.github/workflows/mdsvex.yaml +++ b/.github/workflows/mdsvex.yaml @@ -13,15 +13,15 @@ jobs: name: lint runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 - - run: npm i -g pnpm@8 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - run: npm i -g pnpm@9 + - uses: actions/setup-node@v4 with: - node-version: 16 + node-version: 18 cache: 'pnpm' cache-dependency-path: '**/pnpm-lock.yaml' - run: pnpm i --frozen-lockfile - - run: pnpm format + - run: pnpm lint # type-check here as well when it is working env: CI: true @@ -32,12 +32,12 @@ jobs: runs-on: ${{ matrix.os }} strategy: matrix: - node-version: [16, 18] + node-version: [18, 20, 22] os: [ubuntu-latest, macOS-latest, windows-latest] steps: - - uses: actions/checkout@v3 - - run: npm i -g pnpm@8 - - uses: actions/setup-node@v3 + - uses: actions/checkout@v4 + - run: npm i -g pnpm@9.1 + - uses: actions/setup-node@v4 with: node-version: ${{ matrix.node-version }} cache: 'pnpm' diff --git a/.github/workflows/npm-previews.yaml b/.github/workflows/npm-previews.yaml new file mode 100644 index 00000000..c8b1ec61 --- /dev/null +++ b/.github/workflows/npm-previews.yaml @@ -0,0 +1,24 @@ +name: npm-previews + +on: + pull_request: + paths-ignore: + - 'site/**' + +jobs: + preview: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - run: npm i -g pnpm@9.1 + - uses: actions/setup-node@v4 + with: + node-version: 22 + cache: 'pnpm' + cache-dependency-path: '**/pnpm-lock.yaml' + - run: pnpm i --frozen-lockfile + - run: pnpm -r build + env: + CI: true + name: mdsvex + - run: pnpx pkg-pr-new publish './packages/*' diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 748f3dd7..930b3a6e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -11,14 +11,14 @@ jobs: runs-on: ubuntu-latest steps: - name: Checkout Repo - uses: actions/checkout@v3 + uses: actions/checkout@v4 with: fetch-depth: 0 - - run: npm i -g pnpm@8 - - name: Setup Node.js 16 - uses: actions/setup-node@v3 + - run: npm i -g pnpm@9.1 + - name: Setup Node.js + uses: actions/setup-node@v4 with: - node-version: 16 + node-version: 22 cache: 'pnpm' cache-dependency-path: '**/pnpm-lock.yaml' - name: Creating .npmrc diff --git a/package.json b/package.json index 69952b72..57a2dd09 100644 --- a/package.json +++ b/package.json @@ -4,12 +4,15 @@ "description": "Markdown preprocessor for Svelte", "repository": "https://github.com/pngwn/MDsveX", "scripts": { - "format": "prettier --check .", + "lint": "prettier --check .", + "format": "prettier --write .", "test": "uvu -r ts-node/register packages test.ts$", "test:filter": "uvu -r ts-node/register", "release": "pnpm -r build && changeset publish", "changeset:add": "changeset add", - "changeset:version": "changeset version && pnpm i --lockfile-only" + "changeset:version": "changeset version && pnpm i --lockfile-only", + "site:dev": "pnpm --filter @mdsvex/site dev", + "site:build": "pnpm --filter @mdsvex/site build" }, "keywords": [ "test", @@ -27,7 +30,7 @@ "@types/node": "^14.14.44", "esm": "^3.2.25", "prettier": "^2.2.1", - "rollup": "^2.47.0", + "rollup": "^2.77.4-1", "rollup-plugin-dts": "^3.0.1", "ts-node": "^9.1.1", "typescript": "^4.2.4", @@ -36,5 +39,8 @@ }, "dependencies": { "tslib": "^2.3.1" + }, + "engines": { + "pnpm": "^9.1.0" } } diff --git a/packages/mdsvex/CHANGELOG.md b/packages/mdsvex/CHANGELOG.md index 51c2356c..2c6e2f5b 100644 --- a/packages/mdsvex/CHANGELOG.md +++ b/packages/mdsvex/CHANGELOG.md @@ -1,5 +1,33 @@ # mdsvex +## 0.12.0 + +### Minor Changes + +- [#617](https://github.com/pngwn/MDsveX/pull/617) [`623b182`](https://github.com/pngwn/MDsveX/commit/623b18277b867a7b088951609710af871c9b9e56) Thanks [@benmccann](https://github.com/benmccann)! - add exports map to package.json and cleanup build output. + +### Patch Changes + +- [#612](https://github.com/pngwn/MDsveX/pull/612) [`91ef99f`](https://github.com/pngwn/MDsveX/commit/91ef99f9e95f6014243deadbbdcc13aac24079f8) Thanks [@moiri-gamboni](https://github.com/moiri-gamboni)! - Fix typescript module declaration to resolve errors when importing markdown files as components + +## 0.11.2 + +### Patch Changes + +- [#604](https://github.com/pngwn/MDsveX/pull/604) [`82553e0`](https://github.com/pngwn/MDsveX/commit/82553e02ab06b40a1650632865e076d0ad4d6ea4) Thanks [@pngwn](https://github.com/pngwn)! - Update peerDeps for Svelte 5 + +## 0.11.1 + +### Patch Changes + +- [#596](https://github.com/pngwn/MDsveX/pull/596) [`d238325`](https://github.com/pngwn/MDsveX/commit/d2383257d959c68ea5279fd3a8d22ec6d5a4504e) Thanks [@TheOnlyTails](https://github.com/TheOnlyTails)! - Infer the settings type when using unified plugins with settings + +* [#591](https://github.com/pngwn/MDsveX/pull/591) [`1ff938c`](https://github.com/pngwn/MDsveX/commit/1ff938c9e9aa588486fb57f762a5356630549288) Thanks [@vnphanquang](https://github.com/vnphanquang)! - Allow more extensive extension filtering. For example, now `.md.svelte` is possible + +- [#592](https://github.com/pngwn/MDsveX/pull/592) [`68c6df2`](https://github.com/pngwn/MDsveX/commit/68c6df2e97103119a2bb048588f43d4f0fad1493) Thanks [@vnphanquang](https://github.com/vnphanquang)! - Pass filename to highlighter + +* [#603](https://github.com/pngwn/MDsveX/pull/603) [`ae41002`](https://github.com/pngwn/MDsveX/commit/ae410026fb51bcdb5577c324a4e4d87323a0e57b) Thanks [@pngwn](https://github.com/pngwn)! - Update peerDependencies to allow Svelte 5 + ## 0.11.0 ### Minor Changes diff --git a/packages/mdsvex/globals.d.ts b/packages/mdsvex/globals.d.ts index 4575d3a1..8981f587 100644 --- a/packages/mdsvex/globals.d.ts +++ b/packages/mdsvex/globals.d.ts @@ -1,17 +1,15 @@ declare module '*.svx' { - import type { SvelteComponentDev } from 'svelte/internal'; + import type { SvelteComponent } from 'svelte'; - export default class Comp extends SvelteComponentDev { - $$prop_def: {}; - } - export const metadata: Record; + export default class Comp extends SvelteComponent {} + + export const metadata: Record; } declare module '*.svelte.md' { - import type { SvelteComponentDev } from 'svelte/internal'; + import type { SvelteComponent } from 'svelte'; + + export default class Comp extends SvelteComponent {} - export default class Comp extends SvelteComponentDev { - $$prop_def: {}; - } - export const metadata: Record; + export const metadata: Record; } diff --git a/packages/mdsvex/package.json b/packages/mdsvex/package.json index eae748f1..d3f98f46 100644 --- a/packages/mdsvex/package.json +++ b/packages/mdsvex/package.json @@ -1,10 +1,15 @@ { "name": "mdsvex", - "version": "0.11.0", + "version": "0.12.0", "description": "Markdown preprocessor for Svelte", - "main": "dist/main.cjs.js", - "module": "dist/main.es.js", - "browser": "dist/mdsvex.js", + "exports": { + ".": { + "require": "dist/main.cjs", + "default": "dist/main.mjs" + } + }, + "main": "dist/main.cjs", + "module": "dist/main.mjs", "repository": "https://github.com/pngwn/MDsveX", "scripts": { "build": "rollup -c" @@ -23,8 +28,10 @@ "author": "pngwn ", "license": "MIT", "devDependencies": { + "@rollup/plugin-commonjs": "^25.0.7", + "@rollup/plugin-node-resolve": "^15.2.3", "@rollup/plugin-replace": "^2.4.2", - "@rollup/plugin-sucrase": "^3.1.0", + "@rollup/plugin-sucrase": "^5.0.2", "@starptech/prettyhtml-hast-to-html": "^0.10.0", "@types/acorn": "^4.0.5", "@types/escape-html": "^1.0.0", @@ -46,11 +53,9 @@ "remark-slug": "^6.0.0", "retext": "^7.0.1", "retext-smartypants": "^4.0.0", - "rollup-plugin-commonjs": "^10.1.0", "rollup-plugin-json": "^4.0.0", "rollup-plugin-node-builtins": "^2.1.2", "rollup-plugin-node-globals": "^1.4.0", - "rollup-plugin-node-resolve": "^5.2.0", "rollup-plugin-svelte": "^5.1.1", "shiki": "^0.9.3", "svelte": "^4.0.0", @@ -59,7 +64,7 @@ "vfile": "^4.2.0" }, "peerDependencies": { - "svelte": ">=3 <5" + "svelte": "^3.56.0 || ^4.0.0 || ^5.0.0-next.120" }, "dependencies": { "@types/unist": "^2.0.3", diff --git a/packages/mdsvex/rollup.config.js b/packages/mdsvex/rollup.config.js index 1cb0b556..883be1b6 100644 --- a/packages/mdsvex/rollup.config.js +++ b/packages/mdsvex/rollup.config.js @@ -1,5 +1,5 @@ -import resolve from 'rollup-plugin-node-resolve'; -import commonjs from 'rollup-plugin-commonjs'; +import resolve from '@rollup/plugin-node-resolve'; +import commonjs from '@rollup/plugin-commonjs'; import json from 'rollup-plugin-json'; import builtins from 'rollup-plugin-node-builtins'; import globals from 'rollup-plugin-node-globals'; @@ -33,52 +33,4 @@ export default [ { file: 'dist/main.cjs.d.ts', format: 'cjs' }, ], }, - { - plugins: [ - replace({ - '(process ).browser': true, - '(process as RollupProcess).browser': true, - delimiters: ['', ''], - }), - resolve({ browser: true }), - commonjs({ namedExports: { 'svelte/compiler': ['parse'] } }), - json(), - sucrase({ transforms: ['typescript'] }), - globals(), - builtins(), - ], - input: 'src/main.ts', - output: [ - { - file: 'dist/browser-umd.js', - name: 'mdsvex', - format: 'umd', - sourcemap: false, - }, - ], - }, - { - plugins: [ - replace({ - '(process ).browser': true, - '(process as RollupProcess).browser': true, - delimiters: ['', ''], - }), - resolve({ browser: true }), - commonjs({ namedExports: { 'svelte/compiler': ['parse'] } }), - json(), - sucrase({ transforms: ['typescript'] }), - globals(), - builtins(), - ], - input: 'src/main.ts', - output: [ - { - file: 'dist/browser-es.js', - name: 'mdsvex', - format: 'es', - sourcemap: false, - }, - ], - }, ]; diff --git a/packages/mdsvex/src/index.ts b/packages/mdsvex/src/index.ts index cc11dbd0..b62a851e 100644 --- a/packages/mdsvex/src/index.ts +++ b/packages/mdsvex/src/index.ts @@ -287,9 +287,9 @@ export const mdsvex = (options: MdsvexOptions = defaults): Preprocessor => { name: 'mdsvex', markup: async ({ content, filename }) => { const extensionsParts = (extensions || [extension]).map((ext) => - ext.split('.').pop() + ext.startsWith('.') ? ext : '.' + ext ); - if (!extensionsParts.includes(filename.split('.').pop())) return; + if (!extensionsParts.some((ext) => filename.endsWith(ext))) return; const parsed = await parser.process({ contents: content, filename }); return { diff --git a/packages/mdsvex/src/transformers/index.ts b/packages/mdsvex/src/transformers/index.ts index f7759dde..0e960a9b 100644 --- a/packages/mdsvex/src/transformers/index.ts +++ b/packages/mdsvex/src/transformers/index.ts @@ -380,7 +380,7 @@ export function transform_hast({ // @ts-ignore _module[0].value = _module[0].value.replace( RE_MODULE_SCRIPT, - `$1${newline}\t${fm}` + (match: string) => `${match}${newline}\t${fm}` ); } @@ -547,7 +547,7 @@ export function highlight_blocks({ } } - return async function (tree) { + return async function (tree, vFile) { if (highlight_fn) { const nodes: (Code | HTML)[] = []; visit(tree, 'code', (node) => { @@ -560,7 +560,9 @@ export function highlight_blocks({ node.value = await highlight_fn( node.value, (node as Code).lang, - (node as Code).meta + (node as Code).meta, + //@ts-ignore + vFile.filename ); }) ); diff --git a/packages/mdsvex/src/types.ts b/packages/mdsvex/src/types.ts index 4ccc85e9..5d3f259e 100644 --- a/packages/mdsvex/src/types.ts +++ b/packages/mdsvex/src/types.ts @@ -152,8 +152,9 @@ export type Layout = Record; export type Highlighter = ( code: string, - lang: string | undefined, - metastring: string | undefined + lang: string | null | undefined, + metastring: string | null | undefined, + filename?: string ) => string | Promise; interface HighlightOptions { /** @@ -182,7 +183,11 @@ interface HighlightOptions { alias?: Record; } -export type UnifiedPlugins = Array<[Plugin, Settings] | Plugin>; +export type PluginWithSettings< + S extends any[] = [Settings?], + P extends Plugin = Plugin +> = [P, ...S]; +export type UnifiedPlugins = Array; export interface TransformOptions { remarkPlugins?: UnifiedPlugins; diff --git a/packages/mdsvex/test/_fixtures/hybrid/input/dollar-one-in-frontmatter.svx b/packages/mdsvex/test/_fixtures/hybrid/input/dollar-one-in-frontmatter.svx new file mode 100644 index 00000000..61127b3e --- /dev/null +++ b/packages/mdsvex/test/_fixtures/hybrid/input/dollar-one-in-frontmatter.svx @@ -0,0 +1,5 @@ +--- +price: '$10' +--- + \ No newline at end of file diff --git a/packages/mdsvex/test/_fixtures/hybrid/output/dollar-one-in-frontmatter.svelte b/packages/mdsvex/test/_fixtures/hybrid/output/dollar-one-in-frontmatter.svelte new file mode 100644 index 00000000..5ff48efc --- /dev/null +++ b/packages/mdsvex/test/_fixtures/hybrid/output/dollar-one-in-frontmatter.svelte @@ -0,0 +1,4 @@ + diff --git a/packages/site/.gitignore b/packages/site/.gitignore index d076dd10..8c1592e4 100644 --- a/packages/site/.gitignore +++ b/packages/site/.gitignore @@ -1,6 +1,4 @@ .DS_Store -node_modules -yarn-error.log +/node_modules /cypress/screenshots/ -/__sapper__/ -dist +/.svelte-kit diff --git a/packages/site/package.json b/packages/site/package.json index 3c7c0f51..ac0f64ec 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -1,13 +1,12 @@ { - "name": "mdsvex-playground", + "name": "@mdsvex/site", "description": "Documentation side for mdsvex", "version": "0.0.1", "type": "module", "scripts": { - "dev": "sapper dev --ext '.svelte .svx'", - "build:site": "sapper build --legacy --ext '.svelte .svx'", - "export": "sapper export --legacy --ext '.svelte .svx'", - "start": "node __sapper__/build", + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", "cy:run": "cypress run", "cy:open": "cypress open", "test": "run-p --race dev cy:run", @@ -15,11 +14,8 @@ }, "private": "true", "dependencies": { - "compression": "^1.7.1", "mdsvex": "^0.7.1-beta.3", - "polka": "^0.5.0", "refractor": "^2.10.0", - "sirv": "^0.4.0", "yootils": "^0.0.15" }, "devDependencies": { @@ -33,20 +29,23 @@ "@rollup/plugin-json": "^4.1.0", "@rollup/plugin-node-resolve": "^13.0.5", "@rollup/plugin-replace": "^3.0.0", + "@sveltejs/kit": "^2.4.1", + "@sveltejs/adapter-auto": "^3.1.1", + "@sveltejs/vite-plugin-svelte": "^3.0.1", "codemirror": "^5.49.2", "npm-run-all": "^4.1.5", - "prism-svelte": "^0.4.4", + "prism-svelte": "^0.5.0", "rehype-autolink-headings": "^2.0.5", "rehype-slug": "^2.0.3", "remark-syntax-highlight": "^0.1.3", - "rollup": "^2.58.0", - "rollup-plugin-svelte": "^7.1.0", + "rollup": "^2.77.4-1", + "rollup-plugin-svelte": "^7.1.6", "rollup-plugin-terser": "^7.0.2", - "sapper": "^0.29.3", - "svelte": "^3.7.1", - "svelte-json-tree": "^0.0.7", + "svelte": "^4.2.2", + "svelte-json-tree": "^2.2.0", "typeface-catamaran": "^0.0.72", "typeface-roboto": "^0.0.75", - "unist-util-visit": "^2.0.1" + "unist-util-visit": "^2.0.1", + "vite": "^5.0.12" } } diff --git a/packages/site/rollup.config.js b/packages/site/rollup.config.js deleted file mode 100644 index e1f2b9a0..00000000 --- a/packages/site/rollup.config.js +++ /dev/null @@ -1,150 +0,0 @@ -import 'prismjs'; -import "prism-svelte"; -import "./prism/svx.js"; - - - -import resolve from "@rollup/plugin-node-resolve"; -import replace from "@rollup/plugin-replace"; -import commonjs from "@rollup/plugin-commonjs"; -import svelte from "rollup-plugin-svelte"; -import babel from "@rollup/plugin-babel"; -import { terser } from "rollup-plugin-terser"; -import config from "sapper/config/rollup.js"; -import pkg from "./package.json"; - -import slug from "rehype-slug"; -import link from "rehype-autolink-headings"; - -import { highlight, highlighter } from "./prism/prism.js"; - -import { extname } from "path"; - -const mode = process.env.NODE_ENV; -const dev = mode === "development"; -const legacy = !!process.env.SAPPER_LEGACY_BUILD; - -import { mdsvex } from "mdsvex"; - -function mdsvex_transform() { - return { - async transform(code, id) { - if (extname(id) !== ".svtext") return; - - const c = ( - await mdsvex({ - highlight: { - alias: { - ts: "typescript", - mdx: "markdown", - svelte: "svelte", - svx: "svx", - mdsvex: "svx", - sig: "ts", - } - }, - extension: '.svtext', - rehypePlugins: [slug, link] - }).markup({ content: code, filename: id }) - ).code; - return `export default \`${c.replace(/`/g, "\\`").trim()}\`;`; - } - }; -} - -export default { - client: { - input: config.client.input(), - output: config.client.output(), - globals: { - global: "window" - }, - plugins: [ - replace({ - "process.browser": true, - "process.env.NODE_ENV": JSON.stringify(mode) - }), - mdsvex_transform(), - svelte({ - extensions: [".svelte", ".svx"], - compilerOptions: { - dev, - hydratable: true - }, - emitCss: true, - preprocess: mdsvex({ extension: '.svx' }) - }), - resolve({ preferBuiltins: false, browser: true }), - commonjs(), - - legacy && - babel({ - extensions: [".js", ".mjs", ".html", ".svelte"], - babelHelpers: "runtime", - exclude: ["node_modules/@babel/**"], - presets: [ - [ - "@babel/preset-env", - { - targets: "> 0.25%, not dead" - } - ] - ], - plugins: [ - "@babel/plugin-syntax-dynamic-import", - [ - "@babel/plugin-transform-runtime", - { - useESModules: true - } - ] - ] - }), - - !dev && - terser({ - module: true - }) - ] - }, - - server: { - input: config.server.input(), - output: config.server.output(), - plugins: [ - replace({ - "process.browser": false, - "process.env.NODE_ENV": JSON.stringify(mode) - }), - mdsvex_transform(), - svelte({ - extensions: [".svelte", ".svx"], - compilerOptions: { - generate: "ssr", - dev - }, - preprocess: mdsvex({ extension: '.svx' }) - }), - resolve({ browser: true }), - commonjs() - ], - external: Object.keys(pkg.dependencies).concat( - require("module").builtinModules || - Object.keys(process.binding("natives")) - ) - }, - - serviceworker: { - input: config.serviceworker.input(), - output: config.serviceworker.output(), - plugins: [ - resolve(), - replace({ - "process.browser": true, - "process.env.NODE_ENV": JSON.stringify(mode) - }), - commonjs(), - !dev && terser() - ] - } -}; diff --git a/packages/site/src/template.html b/packages/site/src/app.html similarity index 94% rename from packages/site/src/template.html rename to packages/site/src/app.html index 9221dd2f..a5b02057 100644 --- a/packages/site/src/template.html +++ b/packages/site/src/app.html @@ -4,8 +4,6 @@ - %sapper.base% - @@ -48,13 +46,11 @@ /> - %sapper.styles% %sapper.head% + %sveltekit.head% -
%sapper.html%
- - %sapper.scripts% +
%sveltekit.body%
diff --git a/packages/site/src/client.js b/packages/site/src/client.js deleted file mode 100644 index cec91725..00000000 --- a/packages/site/src/client.js +++ /dev/null @@ -1,5 +0,0 @@ -import * as sapper from '@sapper/app'; - -sapper.start({ - target: document.querySelector('#sapper') -}); \ No newline at end of file diff --git a/packages/site/src/components/Input.svelte b/packages/site/src/components/Input.svelte index 8667aed3..7f111ecb 100644 --- a/packages/site/src/components/Input.svelte +++ b/packages/site/src/components/Input.svelte @@ -70,7 +70,7 @@
{#each line as { text, color, l } (text)} {text} diff --git a/packages/site/src/components/Nav.svelte b/packages/site/src/components/Nav.svelte index 2ff6e6d1..736abd07 100644 --- a/packages/site/src/components/Nav.svelte +++ b/packages/site/src/components/Nav.svelte @@ -1,9 +1,7 @@ - {status} + {$page.status}

{status}

-

{error.message}

- -{#if dev && error.stack} - 
{error.stack}
+{#if $page.error.message} +

{status}: {$page.error.message}

+{:else} +

Encountered a {$page.status} error

{/if} diff --git a/packages/site/src/routes/_layout.svelte b/packages/site/src/routes/+layout.svelte similarity index 100% rename from packages/site/src/routes/_layout.svelte rename to packages/site/src/routes/+layout.svelte diff --git a/packages/site/src/routes/index.svelte b/packages/site/src/routes/+page.svelte similarity index 100% rename from packages/site/src/routes/index.svelte rename to packages/site/src/routes/+page.svelte diff --git a/packages/site/src/routes/_docs.svtext b/packages/site/src/routes/_docs.svtext index b560f72b..a80cf048 100644 --- a/packages/site/src/routes/_docs.svtext +++ b/packages/site/src/routes/_docs.svtext @@ -189,6 +189,17 @@ export default { } ``` +If you use TypeScript, you should also declare an ambient module: +```ts +declare module '*.md' { + import type { SvelteComponent } from 'svelte' + + export default class Comp extends SvelteComponent{} + + export const metadata: Record +} +``` + Then you can do: ```svx @@ -662,21 +673,30 @@ Frontmatter also interacts with layouts, you can find more details in the [Layou ## Integrations -### With Sapper +### With shiki -To use mdsvex with sapper you need to add the mdsvex configuration to both the client and server sections of the rollup or webpack configuration. You will also need to add the CLI argument `--ext '.svelte .svx'` to all of the sapper scripts (`dev`, `build`, and `export`) in order to tell sapper that it should also allow `.svx` files to be page routes. +You can use shiki for highlighting rather than prism by leveraging the `highlighter` option: -Or you can use the templates: -- [Rollup](https://github.com/pngwn/sapper-mdsvex-template) +```js +import { mdsvex, escapeSvelte } from 'mdsvex'; +import { createHighlighter } from 'shiki'; - ```bash - npx degit "pngwn/sapper-mdsvex-template" my-app - ``` -- [Webpack](https://github.com/shiryel/sapper-mdsvex-template-webpack) +const theme = 'github-dark'; +const highlighter = await createHighlighter({ + themes: [theme], + langs: ['javascript', 'typescript'] +}); - ```bash - npx degit "shiryel/sapper-mdsvex-template-webpack" my-app - ``` +/** @type {import('mdsvex').MdsvexOptions} */ +const mdsvexOptions = { + highlight: { + highlighter: async (code, lang = 'text') => { + const html = escapeSvelte(highlighter.codeToHtml(code, { lang, theme })); + return `{@html \\`${html}\\` }`; + } + }, +} +``` ## Limitations diff --git a/packages/site/src/routes/_source.js b/packages/site/src/routes/_source.js index 1cb0df70..97721807 100644 --- a/packages/site/src/routes/_source.js +++ b/packages/site/src/routes/_source.js @@ -98,6 +98,8 @@ export const code_2 = `
{#each boingers.filter(v => !v.boinged) as {val} (val)} + +
{#each boingers.filter(v => v.boinged) as {val} (val)} +
- import { stores } from '@sapper/app'; + import { page } from '$app/stores'; import { onMount } from 'svelte'; import { fade } from 'svelte/transition'; - import docs from './_docs.svtext'; - import Cheatsheet from '../components/Cheatsheet.svx'; + import docs from '../_docs.svtext'; + import Cheatsheet from '../../components/Cheatsheet.svx'; let root; let scrollY = 0; @@ -11,8 +11,6 @@ let current; let position = ''; - const { page } = stores(); - const nav = [ ['Install', 'docs#install-it'], [ @@ -49,7 +47,7 @@ [ 'Integrations', 'docs#integrations', - [['sapper', 'docs#with-sapper', false]], + [['shiki', 'docs#with-shiki', false]], ], ['Limitations', 'docs#limitations'], ]; diff --git a/packages/site/src/routes/playground.svelte b/packages/site/src/routes/playground/+page.svelte similarity index 97% rename from packages/site/src/routes/playground.svelte rename to packages/site/src/routes/playground/+page.svelte index e53a4b8f..6bb34a26 100644 --- a/packages/site/src/routes/playground.svelte +++ b/packages/site/src/routes/playground/+page.svelte @@ -1,7 +1,7 @@