Skip to content
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

More docs, testing, complete setup, etc #46

Merged
merged 2 commits into from
Mar 21, 2024
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
4 changes: 0 additions & 4 deletions docs-app/app/routes/application.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,10 +27,6 @@ export default class ApplicationRoute extends Route {
import('shiki/langs/handlebars.mjs'),
import('shiki/langs/jsonc.mjs'),
],
langAlias: {
gjs: 'glimmer-js',
gts: 'glimmer-ts',
},
loadWasm: getWasm,
});

Expand Down
2 changes: 1 addition & 1 deletion docs-app/ember-cli-build.js
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ module.exports = async function (defaults) {
src: '../ui/docs',
},
],
packages: ['kolay', 'ember-primitives', 'ember-resources'],
packages: ['kolay'],
}),
],
},
Expand Down
20 changes: 20 additions & 0 deletions docs-app/public/docs/plugins/helpers.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
# Helper utilities

These utilities can be imported and used within your own projects, as they are already used within `kolay`.
This should allow users to build their own specific set of outputs using the same underying tools that `kolay` uses.

```hbs live no-shadow
<APIDocs @module="declarations/plugins" @name="gitRef" @package="kolay" />
```

```hbs live no-shadow
<APIDocs @module="declarations/plugins" @name="packageTypes" @package="kolay" />
```

```hbs live no-shadow
<APIDocs @module="declarations/plugins" @name="virtualFile" @package="kolay" />
```

```hbs live no-shadow
<APIDocs @module="declarations/plugins" @name="generateTypeDocJSON" @package="kolay" />
```
71 changes: 71 additions & 0 deletions docs-app/public/docs/usage/setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -102,3 +102,74 @@ Router.map(function () {
```

In the spirit of dynamically compiled and discovered docs, this adds a `*wildcard` route that matches all paths and then tries to derive which file to load from there.

### Runtime: Rendering and Highlighting

Here is what this site does

- setup shiki for highlighting
- installed as a rehype plugin
- custom set of initially loaded syntaxes, for best experience
- mandatory setup (`apiDocs` and `manifest`)
- additional `resolve` entries for code blocks to pull from

```ts
// app/routes/application.ts
import Route from "@ember/routing/route";
import { service } from "@ember/service";

import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
import { colorScheme, sync } from "ember-primitives/color-scheme";
import { getHighlighterCore } from "shiki/core";
import getWasm from "shiki/wasm";

sync();

import type { DocsService, Manifest } from "kolay";

export default class ApplicationRoute extends Route {
@service("kolay/docs") declare docs: DocsService;

async model(): Promise<{ manifest: Manifest }> {
const highlighter = await getHighlighterCore({
themes: [import("shiki/themes/github-dark.mjs"), import("shiki/themes/github-light.mjs")],
langs: [
import("shiki/langs/javascript.mjs"),
import("shiki/langs/typescript.mjs"),
import("shiki/langs/bash.mjs"),
import("shiki/langs/css.mjs"),
import("shiki/langs/html.mjs"),
import("shiki/langs/glimmer-js.mjs"),
import("shiki/langs/glimmer-ts.mjs"),
import("shiki/langs/handlebars.mjs"),
import("shiki/langs/jsonc.mjs"),
],
loadWasm: getWasm,
});

await this.docs.setup({
apiDocs: import("kolay/api-docs:virtual"),
manifest: import("kolay/manifest:virtual"),
resolve: {
"ember-primitives": import("ember-primitives"),
kolay: import("kolay"),
},
rehypePlugins: [
[
rehypeShikiFromHighlighter,
highlighter,
{
defaultColor: colorScheme.current === "dark" ? "dark" : "light",
themes: {
light: "github-light",
dark: "github-dark",
},
},
],
],
});

return { manifest: this.docs.manifest };
}
}
```
24 changes: 24 additions & 0 deletions docs-app/public/docs/usage/testing.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
# Testing

Testing will require a setup phase so that only your tests that actually need the kolay behavior will cause the kolay behavior to be used.

If using qunit,

```js
import { setupKolay } from "kolay/test-support";

module("my test group", function (hooks) {
setupRenderingTest(hooks);
setupKolay(hooks, async () => ({
apiDocs: await import("kolay/api-docs:virtual"),
manifest: await import("kolay/manifest:virtual"),
}));

test("self", async function (assert) {
// ...
});
});
```

In ember application tests, the `setup` method from the docs service
will have already been called from the application route, so this isn't needed.
7 changes: 7 additions & 0 deletions src/plugins/api-docs/typedoc.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,17 @@ import { packageTypes } from '../helpers.js';
const require = createRequire(import.meta.url);

/**
* Generates APIDocs / TypeDoc from already built declarations. This is meant to use be very permissive and ignore errors so that likelihood of generating a TypeDoc json document increases.
* Over time, this'll probably need to be tweaked, and maybe one day will need an extension API, but for now the only option is specifying which `packageName` to try to generate types for.
*
* Package lookup occurs relative to the package at the current working directory, using `require.resolve`.
* So only packages declared as (dev)dependencies entries can be found.
*
* @typedef {object} Options
* @property {string} packageName
*
* @param {Options} options
* @return {Promise<unknown | undefined>} either the built JSON document, or undefined
*/
export async function generateTypeDocJSON({ packageName }) {
/**
Expand Down
22 changes: 22 additions & 0 deletions src/plugins/git-ref.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,27 @@
import { execSync } from 'node:child_process';

/**
* A build-time utulity, used for getting the short version of the git SHA.
*
* Could be used to hide somewhere in your app so that you know what specific version is deployed.
*
* In an ESM environment, you can import this module:
* ```js
* import { gitRef } from 'kolay/build';
*
* // in some config
* version: gitRef()
* ```
*
* In a CJS environment, you'd require this module:
* ```js
* const { gitRef } = require('kolay/build/legacy');
*
* // in some config
* version: gitRef()
* ```
*
*/
export function gitRef() {
const scriptOutput = execSync('git rev-parse --short HEAD', {
encoding: 'utf-8',
Expand Down
4 changes: 4 additions & 0 deletions src/plugins/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ const require = createRequire(import.meta.url);
export const INTERNAL_PREFIX = `\0`;

/**
* Gather the `types` entries from `package.json#exports`
*
* @param {string} packageName
*/
export async function packageTypes(packageName) {
Expand Down Expand Up @@ -72,6 +74,8 @@ function extractExports(exports, kind) {
}

/**
* Create a virtual file in a rollup-based API by only specifying the desired import path and the content of the virtual file.
*
* @typedef {object} VirtualFileOptions
* @property {string} importPath
* @property {string} content
Expand Down
3 changes: 2 additions & 1 deletion src/plugins/index.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export { generateTypeDocJSON } from './api-docs/typedoc.js';
export { combined as kolay } from './combined.js';
export { gitRef } from './git-ref.js';
export * as helpers from './helpers.js';
export { packageTypes, virtualFile } from './helpers.js';
Loading