Skip to content

Commit cb2c5e3

Browse files
mkszeppmkszepp
authored
Convert docs to GTS (#1009)
* Replace prismjs with shiki to get gts/gjs support & replace first usage * Convert examples to gts * Remove system wide section * Drop addon section (outdated) * Fix snippets / header styling * Use best practices for templates without js * Convert some parts of docs to gts * Convert docs pages to GTS * Replace code in <pre> cause of glint bug * Fix prettier * Remove tests * Improve readme * Improve readme * Improve readme * Update README.md * Update README.md * Update README.md * Update README.md * Fix lint * More readme changes * Fix examples in docs * Move all snippets into same folder
1 parent 47b1639 commit cb2c5e3

165 files changed

Lines changed: 3352 additions & 3221 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎docs/app/app.ts‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,12 @@ import Application from '@ember/application';
22
import Resolver from 'ember-resolver';
33
import loadInitializers from 'ember-load-initializers';
44
import config from 'docs/config/environment';
5-
import Prism from 'prismjs';
65
import { importSync, isDevelopingApp, macroCondition } from '@embroider/macros';
7-
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace';
8-
import 'prismjs/components/prism-css';
9-
import 'prismjs/components/prism-scss';
10-
import 'prismjs/components/prism-javascript';
11-
import 'prismjs/components/prism-handlebars';
12-
import 'prismjs/components/prism-markup-templating';
13-
// @ts-expect-error no types shipped from prismjs-glimmer
14-
import { setup } from 'prismjs-glimmer';
15-
16-
import 'prismjs/themes/prism.css';
176

187
if (macroCondition(isDevelopingApp())) {
198
importSync('./deprecation-workflow');
209
}
2110

22-
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
23-
setup(Prism);
24-
2511
export default class App extends Application {
2612
modulePrefix = config.modulePrefix;
2713
podModulePrefix = config.podModulePrefix;

docs/app/components/code-block.ts renamed to docs/app/components/code-block.gts

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
import Component from '@glimmer/component';
2+
import CodeInline from './code-inline';
23

34
interface CodeBlockSignature {
45
Element: HTMLElement;
56
Args: {
67
code: string;
78
language?: string;
8-
showLineNumbers?: boolean;
9-
start?: string;
109
};
1110
}
1211

@@ -15,9 +14,13 @@ export default class CodeBlock extends Component<CodeBlockSignature> {
1514
return this.args.language ?? 'markup';
1615
}
1716

18-
get languageClass() {
19-
return `language-${this.language}`;
20-
}
17+
<template>
18+
<div class="code-block">
19+
{{~! ~}}
20+
<CodeInline ...attributes @code={{@code}} @language={{@language}} />
21+
{{~! ~}}
22+
</div>
23+
</template>
2124
}
2225

2326
declare module '@glint/environment-ember-loose/registry' {

‎docs/app/components/code-block.hbs‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎docs/app/components/code-example.gts‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
import Component from '@glimmer/component';
2+
import { tracked } from '@glimmer/tracking';
3+
import { action } from '@ember/object';
4+
import { on } from '@ember/modifier';
5+
import { fn } from '@ember/helper';
6+
import { eq, and } from 'ember-truth-helpers';
7+
import CodeBlock from './code-block';
8+
// @ts-expect-error Could not find a declaration file for module 'ember-code-snippet'.
9+
import { getCodeSnippet } from 'ember-code-snippet';
10+
11+
interface CodeExampleSignature {
12+
Element: HTMLElement;
13+
Args: {
14+
glimmerTs?: string;
15+
hbs?: string;
16+
hbs2?: string;
17+
js?: string;
18+
css?: string;
19+
scss?: string;
20+
activeTab?: string;
21+
showResult?: boolean;
22+
};
23+
Blocks: {
24+
default: [];
25+
};
26+
}
27+
28+
export default class CodeExample extends Component<CodeExampleSignature> {
29+
@tracked _activeTab: string = '';
30+
31+
get showResult() {
32+
return this.args.showResult !== undefined ? this.args.showResult : true;
33+
}
34+
35+
get activeTab() {
36+
return (
37+
this._activeTab ||
38+
(this.showResult ? 'result' : this.args.activeTab || 'js')
39+
);
40+
}
41+
42+
@action
43+
setActiveTab(value: string) {
44+
this._activeTab = value;
45+
}
46+
47+
<template>
48+
<article class="code-example" ...attributes>
49+
<nav class="code-example-tabs">
50+
{{#if @glimmerTs}}
51+
<div
52+
class="code-example-tab
53+
{{if (eq this.activeTab 'glimmer-ts') 'active'}}"
54+
role="button"
55+
{{on "click" (fn this.setActiveTab "glimmer-ts")}}
56+
>Template</div>
57+
{{/if}}
58+
{{#if @hbs}}
59+
<div
60+
class="code-example-tab {{if (eq this.activeTab 'hbs') 'active'}}"
61+
role="button"
62+
{{on "click" (fn this.setActiveTab "hbs")}}
63+
>Template</div>
64+
{{/if}}
65+
{{#if @hbs2}}
66+
<div
67+
class="code-sample-tab {{if (eq this.activeTab 'hbs2') 'active'}}"
68+
role="button"
69+
{{on "click" (fn this.setActiveTab "hbs2")}}
70+
>Template 2</div>
71+
{{/if}}
72+
{{#if @js}}
73+
<div
74+
class="code-example-tab {{if (eq this.activeTab 'js') 'active'}}"
75+
role="button"
76+
{{on "click" (fn this.setActiveTab "js")}}
77+
>Javascript</div>
78+
{{/if}}
79+
{{#if @scss}}
80+
<div
81+
class="code-example-tab {{if (eq this.activeTab 'scss') 'active'}}"
82+
role="button"
83+
{{on "click" (fn this.setActiveTab "scss")}}
84+
>SCSS</div>
85+
{{/if}}
86+
{{#if @css}}
87+
<div
88+
class="code-example-tab {{if (eq this.activeTab 'css') 'active'}}"
89+
role="button"
90+
{{on "click" (fn this.setActiveTab "css")}}
91+
>CSS</div>
92+
{{/if}}
93+
{{#if this.showResult}}
94+
<div
95+
class="code-example-tab
96+
{{if (eq this.activeTab 'result') 'active'}}"
97+
role="button"
98+
{{on "click" (fn this.setActiveTab "result")}}
99+
>Result</div>
100+
{{/if}}
101+
</nav>
102+
{{#if (and @glimmerTs (eq this.activeTab "glimmer-ts"))}}
103+
{{#let (getCodeSnippet @glimmerTs) as |snippet|}}
104+
<CodeBlock @language="gts" @code={{snippet.source}} />
105+
{{/let}}
106+
{{/if}}
107+
{{#if (and @hbs (eq this.activeTab "hbs"))}}
108+
{{#let (getCodeSnippet @hbs) as |snippet|}}
109+
<CodeBlock @language="handlebars" @code={{snippet.source}} />
110+
{{/let}}
111+
{{/if}}
112+
{{#if @hbs2}}
113+
{{#let (getCodeSnippet @hbs2) as |snippet|}}
114+
<CodeBlock @language="handlebars" @code={{snippet.source}} />
115+
{{/let}}
116+
{{/if}}
117+
{{#if (and @js (eq this.activeTab "js"))}}
118+
{{#let (getCodeSnippet @js) as |snippet|}}
119+
<CodeBlock @language="js" @code={{snippet.source}} />
120+
{{/let}}
121+
{{/if}}
122+
{{#if (and @scss (eq this.activeTab "scss"))}}
123+
{{#let (getCodeSnippet @scss) as |snippet|}}
124+
<CodeBlock @language="scss" @code={{snippet.source}} />
125+
{{/let}}
126+
{{/if}}
127+
{{#if (and @css (eq this.activeTab "css"))}}
128+
{{#let (getCodeSnippet @css) as |snippet|}}
129+
<CodeBlock @language="css" @code={{snippet.source}} />
130+
{{/let}}
131+
{{/if}}
132+
{{#if (and this.showResult (has-block))}}
133+
<div
134+
class="code-example-snippet result
135+
{{if (eq this.activeTab 'result') 'active'}}"
136+
>
137+
{{yield}}
138+
</div>
139+
{{/if}}
140+
</article>
141+
</template>
142+
}

‎docs/app/components/code-example.hbs‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎docs/app/components/code-example.js‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

docs/app/components/code-inline.ts renamed to docs/app/components/code-inline.gts

Lines changed: 17 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { modifier } from 'ember-modifier';
33
import { htmlSafe, type SafeString } from '@ember/template';
44
import { tracked } from '@glimmer/tracking';
55
import { assert } from '@ember/debug';
6-
import Prism from 'prismjs';
6+
import { codeToHtml } from 'shiki';
7+
import { task } from 'ember-concurrency';
78

89
interface CodeInlineSignature {
910
Element: HTMLElement;
@@ -23,10 +24,6 @@ export default class CodeInline extends Component<CodeInlineSignature> {
2324
"ember-prism's <CodeBlock/> and <CodeInline/> components require a `code` parameter to be passed in.",
2425
code !== undefined,
2526
);
26-
if (Prism?.plugins['NormalizeWhitespace']) {
27-
// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
28-
return Prism.plugins['NormalizeWhitespace'].normalize(code) as string;
29-
}
3027

3128
return code;
3229
}
@@ -35,28 +32,27 @@ export default class CodeInline extends Component<CodeInlineSignature> {
3532
return this.args.language ?? 'markup';
3633
}
3734

38-
get languageClass() {
39-
return `language-${this.language}`;
40-
}
35+
setup = modifier(() => {
36+
void this.generateCode.perform();
37+
});
4138

42-
setPrismCode = modifier((element: Element) => {
39+
generateCode = task(async () => {
4340
const code = this.code;
4441
const language = this.language;
45-
const grammar = Prism.languages[language];
46-
47-
if (code && language && grammar) {
48-
this.prismCode = htmlSafe(Prism.highlight(code, grammar, language));
49-
} else {
50-
this.prismCode = '';
51-
}
5242

53-
// Force plugin initialization, required for Prism.highlight usage.
54-
// See https://github.com/PrismJS/prism/issues/1234
55-
Prism.hooks.run('complete', {
56-
code,
57-
element,
43+
const htmlCode = await codeToHtml(code, {
44+
lang: language,
45+
theme: 'github-light-default',
5846
});
47+
48+
this.prismCode = htmlSafe(htmlCode);
5949
});
50+
51+
<template>
52+
<div ...attributes {{this.setup}}>
53+
{{~! ~}}{{this.prismCode}}{{~! ~}}
54+
</div>
55+
</template>
6056
}
6157

6258
declare module '@glint/environment-ember-loose/registry' {

‎docs/app/components/code-inline.hbs‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎docs/app/components/snippets/animations-1.gts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import BasicDropdown from 'ember-basic-dropdown/components/basic-dropdown';
2+
3+
<template>
4+
<BasicDropdown as |dd|>
5+
<dd.Trigger class="trigger-bootstrap-feel">Animate me</dd.Trigger>
6+
7+
<dd.Content class="content-bootstrap-feel width-300 slide-fade">
8+
<li>Miguel</li>
9+
<li>Matthew</li>
10+
<li>Dan</li>
11+
</dd.Content>
12+
</BasicDropdown>
13+
</template>

0 commit comments

Comments
 (0)