diff --git a/src/Umbraco.Web.UI.Client/.storybook/preview.js b/src/Umbraco.Web.UI.Client/.storybook/preview.js index b601e2b586..262cfe4e44 100644 --- a/src/Umbraco.Web.UI.Client/.storybook/preview.js +++ b/src/Umbraco.Web.UI.Client/.storybook/preview.js @@ -88,6 +88,12 @@ const documentTreeStoreProvider = (story) => html` export const decorators = [documentStoreProvider, documentTreeStoreProvider, dataTypeStoreProvider, storybookProvider]; export const parameters = { + docs: { + source: { + excludeDecorators: true, + format: 'html', // see storybook docs for more info on this format https://storybook.js.org/docs/api/doc-blocks/doc-block-source#format + }, + }, options: { storySort: { method: 'alphabetical', diff --git a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets index b8907220b6..4920d8011b 100644 --- a/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets +++ b/src/Umbraco.Web.UI.Client/.vscode/lit.code-snippets @@ -1,30 +1,30 @@ { - "Create Lit Component": { - "prefix": "lit new", + "UmbNewLitElement": { + "prefix": "new umb element", "scope": "typescript", "body": [ - "import { UmbTextStyles } from '@umbraco-ui/backoffice/style';", - "import { css, html } from 'lit';", - "import { customElement } from 'lit/decorators.js';", + "import { css, customElement, html } from '@umbraco-cms/backoffice/external/lit';", "import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';", + "import { UmbTextStyles } from '@umbraco-cms/backoffice/style';", "", "@customElement('umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}')", - "export class Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element extends UmbLitElement {", - "\trender() {", - "\t\treturn html`${0:umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}}`;", + "export class Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element extends UmbLitElement {", + "\toverride render() {", + "\t\treturn html`$0`;", "\t}", "", - "\tstatic styles = [UmbTextStyles, css``];", + "\tstatic override readonly styles = [UmbTextStyles, css``];", "}", "", - "export default Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element", + "export { Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element as element };", "", "declare global {", "\tinterface HTMLElementTagNameMap {", - "\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)\\..+$/${1:/pascalcase}/}Element;", + "\t\t'umb-${TM_FILENAME_BASE/(.*)\\..+$/$1/}': Umb${TM_FILENAME_BASE/(.*)$/${1:/pascalcase}/}Element;", "\t}", - "}" + "}", + "", ], - "description": "Create a new Lit Component" - } + "description": "Create a new Umbraco Lit element", + }, } diff --git a/src/Umbraco.Web.UI.Client/devops/build/global-types.js b/src/Umbraco.Web.UI.Client/devops/build/global-types.js new file mode 100644 index 0000000000..88d16199b6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/devops/build/global-types.js @@ -0,0 +1,25 @@ +import { createImportMap } from '../importmap/index.js'; +import { writeFileWithDir } from '../utils/index.js'; + +const tsPath = './dist-cms/packages/extension-types/index.d.ts'; + +const importmap = createImportMap({ + rootDir: './src', + replaceModuleExtensions: true, +}); + +const paths = Object.keys(importmap.imports); + +const content = ` +${paths.map((path) => `import '${path}';`).join('\n')} +`; + +writeFileWithDir(tsPath, content, (err) => { + if (err) { + // eslint-disable-next-line no-undef + console.log(err); + } + + // eslint-disable-next-line no-undef + console.log(`global-types file generated`); +}); diff --git a/src/Umbraco.Web.UI.Client/devops/importmap/index.js b/src/Umbraco.Web.UI.Client/devops/importmap/index.js index b97682d3e6..3ea95ebf89 100644 --- a/src/Umbraco.Web.UI.Client/devops/importmap/index.js +++ b/src/Umbraco.Web.UI.Client/devops/importmap/index.js @@ -8,14 +8,14 @@ export const createImportMap = (args) => { // Iterate over the exports in package.json for (const [key, value] of Object.entries(packageJsonExports || {})) { // remove leading ./ - if (value) { + if (value && value.endsWith('.js')) { const moduleName = key.replace(/^\.\//, ''); // replace ./dist-cms with src and remove /index.js let modulePath = value; if (typeof args.rootDir !== 'undefined') modulePath = modulePath.replace(/^\.\/dist-cms/, args.rootDir); if (args.replaceModuleExtensions) modulePath = modulePath.replace('.js', '.ts'); - console.log('replacing', value, 'with', modulePath) + console.log('replacing', value, 'with', modulePath); const importAlias = `${packageJsonName}/${moduleName}`; imports[importAlias] = modulePath; diff --git a/src/Umbraco.Web.UI.Client/devops/utils/index.js b/src/Umbraco.Web.UI.Client/devops/utils/index.js new file mode 100644 index 0000000000..69244f16a2 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/devops/utils/index.js @@ -0,0 +1,13 @@ +import { writeFile, mkdir } from 'fs'; +import * as pathModule from 'path'; + +const path = pathModule.default; +const getDirName = path.dirname; + +export const writeFileWithDir = (path, contents, cb) => { + mkdir(getDirName(path), { recursive: true }, function (err) { + if (err) return cb(err); + + writeFile(path, contents, cb); + }); +}; diff --git a/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts b/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts index 988ad6197a..43be6cfdd4 100644 --- a/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts +++ b/src/Umbraco.Web.UI.Client/examples/manifest-picker/manifest-picker-dashboard.ts @@ -1,11 +1,13 @@ import { css, html, customElement, state, when, nothing } from '@umbraco-cms/backoffice/external/lit'; import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry'; -import { UmbInputManifestElement } from '@umbraco-cms/backoffice/components'; +import type { UmbInputManifestElement } from '@umbraco-cms/backoffice/components'; import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element'; import { UmbTextStyles } from '@umbraco-cms/backoffice/style'; -import { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; +import type { UUISelectEvent } from '@umbraco-cms/backoffice/external/uui'; +// eslint-disable-next-line local-rules/enforce-umb-prefix-on-element-name @customElement('example-manifest-picker-dashboard') +// eslint-disable-next-line local-rules/enforce-element-suffix-on-element-class-name, local-rules/umb-class-prefix export class ExampleManifestPickerDashboard extends UmbLitElement { #options: Array