Add component API to docs (ex: props, events, slots)
This commit is contained in:
venashial
parent
5a5f817e59
commit
a0e05115a3
3
.github/workflows/release.yml
vendored
3
.github/workflows/release.yml
vendored
@ -46,4 +46,5 @@ jobs:
|
||||
|
||||
- uses: EndBug/add-and-commit@v9
|
||||
with:
|
||||
message: 'Bump package version [skip ci]'
|
||||
message: '(bot) Bump package version [skip ci]'
|
||||
default_author: github_actions
|
||||
|
||||
@ -8,6 +8,8 @@
|
||||
"package": "svelte-kit package",
|
||||
"preview": "svelte-kit preview",
|
||||
"prepare": "svelte-kit sync",
|
||||
"generate": "node scripts/generate.cjs",
|
||||
"generate:watch": "nodemon --watch app --watch libs app/server.js",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. . && eslint --ignore-path .gitignore .",
|
||||
@ -18,6 +20,7 @@
|
||||
"@iconify-json/heroicons-outline": "^1.1.1",
|
||||
"@iconify-json/lucide": "^1.1.7",
|
||||
"@poppanator/sveltekit-svg": "^0.3.1",
|
||||
"@sveltejs/adapter-auto": "^1.0.0-next.33",
|
||||
"@sveltejs/kit": "next",
|
||||
"@typescript-eslint/eslint-plugin": "^5.10.1",
|
||||
"@typescript-eslint/parser": "^5.10.1",
|
||||
@ -27,6 +30,7 @@
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^3.2.1",
|
||||
"mdsvex": "^0.10.5",
|
||||
"nodemon": "^2.0.15",
|
||||
"postcss": "^8.4.8",
|
||||
"postcss-extend-rule": "^4.0.0",
|
||||
"postcss-import": "^14.0.2",
|
||||
@ -40,15 +44,13 @@
|
||||
"svelte-check": "^2.2.6",
|
||||
"svelte-preprocess": "^4.10.1",
|
||||
"svelte2tsx": "^0.5.5",
|
||||
"sveltedoc-parser": "^4.2.1",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "~4.6.2",
|
||||
"unplugin-icons": "^0.13.3"
|
||||
},
|
||||
"type": "module",
|
||||
"svelte": "index.js",
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-auto": "^1.0.0-next.31"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/modrinth/omorphia.git"
|
||||
|
||||
725
pnpm-lock.yaml
generated
725
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
1
src/global.d.ts
vendored
Normal file
1
src/global.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite-plugin-sveld" />
|
||||
11
src/lib/components/Link.svelte
Normal file
11
src/lib/components/Link.svelte
Normal file
@ -0,0 +1,11 @@
|
||||
<script lang="ts">
|
||||
export let href: string;
|
||||
</script>
|
||||
|
||||
<a {href}><slot /></a>
|
||||
|
||||
<style lang="postcss">
|
||||
a {
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
import IconArrowRight from 'virtual:icons/heroicons-outline/arrow-right'
|
||||
import IconArrowLeft from 'virtual:icons/heroicons-outline/arrow-left'
|
||||
import IconMinus from 'virtual:icons/heroicons-outline/minus'
|
||||
import Button from "./buttons/Button.svelte";
|
||||
import Button from "./Button.svelte";
|
||||
import { createEventDispatcher } from 'svelte'
|
||||
|
||||
export let page: number;
|
||||
@ -10,9 +10,9 @@
|
||||
let lastScrollTop: number
|
||||
window.addEventListener('scroll', function () {
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop
|
||||
if (scrollTop > lastScrollTop) {
|
||||
if (scrollTop > lastScrollTop && headerElement) {
|
||||
headerElement.style.top = 'calc(var(--header-height) * -1)'
|
||||
} else {
|
||||
} else if (headerElement) {
|
||||
headerElement.style.top = '0'
|
||||
}
|
||||
lastScrollTop = scrollTop
|
||||
|
||||
@ -1,3 +1,7 @@
|
||||
<script lang="ts">
|
||||
const components = ['button', 'pagination', 'link']
|
||||
</script>
|
||||
|
||||
<nav class="sidebar">
|
||||
<div class="section">
|
||||
<span class="section__title">Getting started</span>
|
||||
@ -8,7 +12,7 @@
|
||||
|
||||
<div class="section">
|
||||
<span class="section__title">Components</span>
|
||||
{#each ['buttons', 'pagination'] as component}
|
||||
{#each components as component}
|
||||
<a href="/components/{component}" class="section__link">{component}</a>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
<script lang="ts">
|
||||
import IconPencil from 'virtual:icons/heroicons-outline/pencil'
|
||||
import { page } from '$app/stores'
|
||||
import { onMount } from 'svelte'
|
||||
|
||||
export let title
|
||||
export let component
|
||||
let pageUrl = `https://github.com/modrinth/omorphia/edit/main/src/routes/${$page.url.pathname.replace('/', '') || 'index'}.md`
|
||||
|
||||
let api
|
||||
|
||||
onMount(async () => {
|
||||
if (component) {
|
||||
api = (await import(`../../../lib/components/${component}.svelte?raw&api`)).default
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -16,6 +26,76 @@
|
||||
<IconPencil/>
|
||||
Edit this page on GitHub</a>
|
||||
<slot/>
|
||||
|
||||
{#if component && api}
|
||||
<div class="extra-info">
|
||||
{#if api.data.length > 0}
|
||||
<h2>Properties</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default</th>
|
||||
<th>Description</th>
|
||||
<th>Read only</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.data as prop}
|
||||
<tr>
|
||||
<td>{prop.name}</td>
|
||||
<td>{prop.type.type}</td>
|
||||
<td>{prop.defaultValue}</td>
|
||||
<td>{prop.description?.replace('null', '') || ''}</td>
|
||||
<td>{prop.readonly}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.events.length > 0}
|
||||
<h2>Events</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Forwarded</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.events as event}
|
||||
<tr>
|
||||
<td>{event.name}</td>
|
||||
<td>{!!event.parent}</td>
|
||||
<td>{event.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
{#if api.slots.length > 0}
|
||||
<h2>Slots</h2>
|
||||
<table class="api-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each api.slots as slot}
|
||||
<tr>
|
||||
<td>{slot.name}</td>
|
||||
<td>{slot.description?.replace('null', '') || ''}</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</article>
|
||||
|
||||
<style lang="postcss">
|
||||
@ -28,6 +108,29 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
grid-gap: 8px;
|
||||
margin-bottom: 64px;
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
|
||||
.extra-info {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.api-table {
|
||||
border-collapse: collapse;
|
||||
|
||||
tr {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
tbody {
|
||||
border: 2px solid grey;
|
||||
}
|
||||
|
||||
th {
|
||||
text-transform: uppercase;
|
||||
font-size: 12.5px;
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -67,7 +67,7 @@ h1 {
|
||||
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
border-bottom: 1px solid #cccccc;
|
||||
/*border-bottom: 1px solid #cccccc;*/
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
---
|
||||
title: Buttons
|
||||
title: Button
|
||||
component: Button
|
||||
---
|
||||
|
||||
<script lang="ts">
|
||||
import Button from "$lib/components/elements/buttons/Button.svelte"
|
||||
import Button from "$lib/components/Button.svelte";
|
||||
</script>
|
||||
|
||||
<Button>Eat cake</Button>
|
||||
10
src/routes/components/link.md
Normal file
10
src/routes/components/link.md
Normal file
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Link
|
||||
component: Link
|
||||
---
|
||||
|
||||
<script lang="ts">
|
||||
import Link from "$lib/components/Link.svelte";
|
||||
</script>
|
||||
|
||||
<Link href="#clicked">Click for fun</Link>
|
||||
@ -1,11 +1,12 @@
|
||||
---
|
||||
title: Pagination
|
||||
component: Pagination
|
||||
---
|
||||
|
||||
<script lang="ts">
|
||||
import Pagination from "$lib/components/elements/Pagination.svelte"
|
||||
import Pagination from "$lib/components/Pagination.svelte"
|
||||
</script>
|
||||
|
||||
TODO
|
||||
Use pagination to show a set of page numbers and navigation directions to move through paginated data.
|
||||
|
||||
<Pagination page={20} count={50} />
|
||||
@ -2,8 +2,11 @@ import {mdsvex} from 'mdsvex';
|
||||
import mdsvexConfig from './mdsvex.config.js';
|
||||
import adapter from '@sveltejs/adapter-auto';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import Icons from 'unplugin-icons/vite';
|
||||
import svelteSvg from '@poppanator/sveltekit-svg';
|
||||
import {parse} from 'sveltedoc-parser'
|
||||
import * as svelte from 'svelte/compiler'
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
@ -25,6 +28,34 @@ const config = {
|
||||
compiler: 'svelte',
|
||||
defaultClass: 'icon',
|
||||
}),
|
||||
{
|
||||
name: "sveltedoc-parser",
|
||||
async transform(src, id) {
|
||||
const query = id.split('?')[1]
|
||||
|
||||
if ((query || '').includes('raw&api')) {
|
||||
const raw = JSON.parse(src.split('export default ')[1])
|
||||
|
||||
let {code} = await svelte.preprocess(raw, sveltePreprocess(), {
|
||||
filename: id
|
||||
})
|
||||
|
||||
const data = await parse({
|
||||
fileContent: code,
|
||||
encoding: 'ascii',
|
||||
features: ['data', 'computed', 'events', 'slots'],
|
||||
ignoredVisibilities: ['private'],
|
||||
includeSourceLocations: true,
|
||||
version: 3
|
||||
})
|
||||
|
||||
return {
|
||||
code: `export default ${JSON.stringify(data)}`,
|
||||
map: null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user