mirror of
https://github.com/docsifyjs/docsify.git
synced 2025-12-08 19:55:52 +00:00
b960519608
This `new Docsify(opts)` API can be safely converted to a Custom Element constructor with backwards compatibility later.
47 lines
1.8 KiB
JavaScript
47 lines
1.8 KiB
JavaScript
// This file demonstrates consuming Docsify as an ES Module with TypeScript types.
|
|
// Things to try:
|
|
// - Running 'Go to Definition' on `Docsify` should take you to the source JS
|
|
// file, not only the declaration file.
|
|
// - Import from any subpath, and the type definitions should be visible.
|
|
|
|
// Import the service worker registration script. This is needed to re-map
|
|
// imports when using ES Modules in the browser, as some of Docsify's
|
|
// dependencies are not available as ES Modules by default (CommonJS) or have
|
|
// non-standard import paths like 'some-lib/some-subpath' without a file
|
|
// extension, or expecting to import `index.js` from a folder, f.e.
|
|
// 'some-lib/some-subpath.js' or 'some-lib/some-subpath/index.js'.
|
|
// FIXME Replace ancient non-ESM dependencies with modern libraries.
|
|
import './register-sw.js';
|
|
|
|
// FIXME hack: import prismjs first to ensure global Prism is set up, as
|
|
// Docsify's graph (the import to
|
|
// 'prismjs/components/prism-markup-templating.js') depends on Prism being
|
|
// global first.
|
|
await import('prismjs');
|
|
|
|
// Import Docsify *after* prismjs or there will be a runtime error. See the
|
|
// importmap, and prism.js for more details.
|
|
//
|
|
// NOTE: we have to use `await import` instead of `import` statements because
|
|
// Prism being global is not statically analyzable by the ES Module system so it
|
|
// will try to execute Docsify's graph before prism.js has finished executed.
|
|
// This is very odd, I didn't think this was possible.
|
|
const { Docsify } = await import('docsify');
|
|
|
|
const d = new Docsify({
|
|
el: '#app',
|
|
name: 'Vanilla ESM TypeScript Example',
|
|
themeColor: 'deeppink',
|
|
hideSidebar: false,
|
|
|
|
// @ts-expect-error invalid property to test that type checking works
|
|
blahblah: 123,
|
|
});
|
|
|
|
console.log(d);
|
|
|
|
// @ts-expect-error global types not available to ESM
|
|
window.Docsify;
|
|
|
|
export {};
|