fix(#331): Add linter

.eslintrc.js

@@ -1,5 +1,9 @@
+// eslint-disable-next-line no-undef
 module.exports = {
-    extends: ['@tybalt/ts-recommended'],
-    parser: '@typescript-eslint/parser',
+    extends: ['plugin:@tybalt/eslint-plugin/ts-recommended'],
+    plugins: ['@tybalt/eslint-plugin'],
     ignorePatterns: ['packages/**/node_modules'],
+    rules: {
+        '@typescript-eslint/no-explicit-any': 'off',
+    },
 };

.github/workflows/yarn-test.yaml

@@ -27,5 +27,8 @@ jobs:
             - name: Build monorepo
               run: yarn build
 
+            - name: Static analysis
+              run: yarn lint
+
             - name: Run unit tests
               run: yarn test

package.json

@@ -31,6 +31,7 @@
         "./packages/website"
     ],
     "devDependencies": {
+        "@tybalt/eslint-plugin": "workspace:^",
         "eslint": "^8.46.0",
         "jest": "^29.4.3",
         "jest-fail-on-console": "^3.1.1",

packages/cli/config/.eslintrc.cjs

@@ -1,5 +1,4 @@
 module.exports = {
-    extends: ['@tybalt/ts-recommended'],
-    parser: '@typescript-eslint/parser',
-    plugins: ['@typescript-eslint'],
+    extends: ['plugin:@tybalt/eslint-plugin/ts-recommended'],
+    plugins: ['@tybalt/eslint-plugin'],
 };

packages/cli/package.json

@@ -25,6 +25,7 @@
         "@chialab/esbuild-plugin-html": "^0.17.2",
         "@swc/core": "^1.3.27",
         "@tybalt/esbuild-plugin": "workspace:^",
+        "@tybalt/eslint-plugin": "workspace:^",
         "@types/glob": "^8.0.1",
         "browser-sync": "^2.27.11",
         "chalk": "^5.2.0",

packages/cli/src/commands/scaffold.ts

@@ -132,7 +132,7 @@ const scaffoldProject = async ({ projectName, options }: { projectName: string;
 };
 
 // Scaffolding steps specific for scaffolding an eleventy site
-const scaffoldEleventy = async ({ projectName, options }: { projectName: string; options: ScaffoldCommandOptions }) => {
+const scaffoldEleventy = async ({ projectName }: { projectName: string; options: ScaffoldCommandOptions }) => {
     devDependencies.push('@tybalt/eleventy-plugin');
     devDependencies.push('@11ty/eleventy');
 
@@ -154,7 +154,7 @@ const scaffoldEleventy = async ({ projectName, options }: { projectName: string;
 };
 
 // Scaffolding steps specific for scaffolding a fastify site
-const scaffoldFastify = async ({ projectName, options }: { projectName: string; options: ScaffoldCommandOptions }) => {
+const scaffoldFastify = async () => {
     dependencies.push(
         '@fastify/autoload',
         '@fastify/sensible',
@@ -244,7 +244,7 @@ const action = async (targetArg: string, options: ScaffoldCommandOptions) => {
         }
         case 'fastify': {
             await scaffoldProject({ projectName: options.name, options });
-            await scaffoldFastify({ projectName: options.name, options });
+            await scaffoldFastify();
             await scaffoldComponent({ componentName: 'HelloWorld', options });
             installDependencies();
             writeScripts();

packages/cli/src/commands/serve.ts

@@ -5,15 +5,16 @@ export default ({ program }: CommandContext) => {
     program
         .command('serve')
         .description('watch a component or components')
-        .option('-e, --examples', 'whether to serve the examples', true)
         .option('-w, --website', 'whether to serve the website', true)
-        .action((options: { examples: boolean; website: boolean }) => {
-            const server = bs.create();
+        .action((options: { website: boolean }) => {
+            if (options.website) {
+                bs.create();
 
-            bs.init({
-                server: './dist',
-            });
+                bs.init({
+                    server: './dist',
+                });
 
-            bs.reload('*.html');
+                bs.reload('*.html');
+            }
         });
 };

packages/cli/src/templates/component.ts

@@ -9,7 +9,7 @@ export default defineComponent({
     shadowMode: 'open',
     props: { name: { validator: compose(string(), required) } },
     render({ name }, ctx) {
-        return html\`<div class="${kebabCaseName}">Hello $\{name\}</div>\`;
+        return html\`<div class="${kebabCaseName}">Hello $\{name}</div>\`;
     }
 });`;
 };

packages/cli/src/templates/gitignore.ts

@@ -1,6 +1,4 @@
-import type { ScaffoldContext } from '../types.js';
-
-export default ({ pascalCaseName }: ScaffoldContext) => {
+export default () => {
     return `node_modules/
 _site/
 dist/

packages/cli/src/templates/jest-config.ts

@@ -1,5 +1,3 @@
-import type { ScaffoldContext } from '../types.js';
-
 export default () => {
     return `module.exports = {
     transform: {

packages/cli/src/templates/tests.ts

@@ -10,7 +10,7 @@ describe('${pascalCaseName}', () => {
         const mockName = 'World';
         const wrapper = await mount(${pascalCaseName}, { attributes: { name: mockName } });
 
-        expect(wrapper.html()).toContain(\`Hello $\{mockName\}\`);
+        expect(wrapper.html()).toContain(\`Hello $\{mockName}\`);
     });
 });`;
 };

packages/core/src/api/context-event.ts

@@ -32,10 +32,10 @@ class TybaltContextEvent<T> implements ContextEvent<T extends UnknownContext ? a
         this.#event = new CustomEvent('context-request', options);
     }
 
-    NONE: 0 = 0;
-    CAPTURING_PHASE: 1 = 1;
-    AT_TARGET: 2 = 2;
-    BUBBLING_PHASE: 3 = 3;
+    NONE: 0 = 0 as const;
+    CAPTURING_PHASE = 1 as const;
+    AT_TARGET: 2 = 2 as const;
+    BUBBLING_PHASE: 3 = 3 as const;
 
     get bubbles() {
         return this.#event.bubbles;
@@ -91,7 +91,7 @@ class TybaltContextEvent<T> implements ContextEvent<T extends UnknownContext ? a
         throw new Error('Method not implemented.');
     }
 
-    initEvent(type: string, bubbles?: boolean | undefined, cancelable?: boolean | undefined): void {
+    initEvent(): void {
         throw new Error('Method not implemented.');
     }
 

packages/core/src/api/define-component.ts

@@ -3,7 +3,7 @@ import { BehaviorSubject, Observable } from 'rxjs';
 
 import ContextEvent from './context-event';
 
-import type { DefineComponentsOptions, SetupContext, Context, UnknownContext } from '../types';
+import type { DefineComponentsOptions, SetupContext } from '../types';
 
 const nameValidator = shouldThrow(
     withMessage(

packages/core/src/index.ts

@@ -1,11 +1,15 @@
 import type { SetupContext, RenderContext, PropsStateMap } from './types';
 
-import * as components from './components';
-
 export { SetupContext, RenderContext, PropsStateMap };
 
 export { default as defineExample } from './api/define-example';
 export { default as defineComponent } from './api/define-component';
 export { default as html } from './api/html';
 export { default as createContext } from './api/create-context';
 export { default as ContextEvent } from './api/context-event';
+
+/*
+ * It seems that esbuild doesn't parse the dependency graph to determine a correct ordering of the modules, so we
+ * have to export the components last to avoid errors like: TypeError: define_component_default is not a function.
+ */
+export * as components from './components';

packages/core/src/types.d.ts

@@ -1,6 +1,7 @@
+/* eslint-disable */
 import type { Observer } from 'rxjs';
 
-export type PropType = String | Number | Object | Array<any>;
+export type PropType = string | number | Object | Array<any>;
 
 export type PropDefinition = {
     default?: any;

packages/eslint-plugin/.eslintrc.js

@@ -0,0 +1,6 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+    rules: {
+        '@typescript-eslint/no-var-requires': 'off',
+    },
+};

packages/eslint-plugin/jest.config.mjs

@@ -1,6 +1,4 @@
 export default {
-    moduleFileExtensions: ['js', 'ts'],
-    extensionsToTreatAsEsm: ['.ts'],
     transform: {
         '^.+\\.tsx?$': 'esbuild-jest',
     },

packages/eslint-plugin/src/index.ts

@@ -1,31 +1,27 @@
-// @ts-ignore
-import { RuleListener, RuleModule } from '@typescript-eslint/utils/ts-eslint';
-import rules from './rules/index.js';
+const rules = require('./rules/index.js');
 
-const config = {
+module.exports = {
     rules,
     configs: {
         recommended: {
             parserOptions: {
                 ecmaVersion: 2021,
             },
-            plugins: ['@tybalt'],
-            env: ['browser', 'es2021'],
+            plugins: ['@tybalt/eslint-plugin'],
+            env: { browser: true, es2021: true },
             extends: ['eslint:recommended'],
             rules: {
                 '@tybalt/component-names-are-multi-word': 'error',
             },
         },
         'ts-recommended': {
-            plugins: ['@tybalt'],
+            plugins: ['@typescript-eslint', '@tybalt/eslint-plugin'],
             parser: '@typescript-eslint/parser',
-            env: ['browser', 'es2021'],
-            extends: ['eslint:recommended'],
+            env: { browser: true, es2021: true },
+            extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
             rules: {
                 '@tybalt/component-names-are-multi-word': 'error',
             },
         },
     },
 };
-
-export default config;

packages/eslint-plugin/src/rules/component-names-are-multi-word.ts

@@ -1,16 +1,18 @@
-import { AST_NODE_TYPES, TSESTree, ESLintUtils } from '@typescript-eslint/utils';
-import { toKebabCase } from 'js-convert-case';
+import type { TSESTree } from '@typescript-eslint/types';
+import type { RuleListener, RuleModule } from '@typescript-eslint/utils/ts-eslint';
 
-import getDefinitionKey from '../utils/get-definition-key';
-import { TYBALT_COMPONENT_DEFINITION } from '../utils/selectors';
-import { RuleListener, RuleModule } from '@typescript-eslint/utils/ts-eslint';
+const { AST_NODE_TYPES, ESLintUtils } = require('@typescript-eslint/utils');
+const { toKebabCase } = require('js-convert-case');
 
-export const RULE_NAME = 'component-names-are-multi-word';
+const getDefinitionKey = require('../utils/get-definition-key');
+const { TYBALT_COMPONENT_DEFINITION } = require('../utils/selectors');
+
+const RULE_NAME = 'component-names-are-multi-word';
 export type MessageIds = 'singleWordComponentName';
 export type Options = [];
 
 const createEslintRule = ESLintUtils.RuleCreator(
-    (name) => `https://doug-wade.github.io/tybalt/eslint-plugin/rule/${name}`,
+    (name: string) => `https://doug-wade.github.io/tybalt/eslint-plugin/rule/${name}`,
 );
 
 const rule: RuleModule<'singleWordComponentName', never[], RuleListener> = createEslintRule({
@@ -27,7 +29,7 @@ const rule: RuleModule<'singleWordComponentName', never[], RuleListener> = creat
         },
     },
     defaultOptions: [],
-    create: (context) => {
+    create: (context: { report: (arg0: { messageId: string; loc: any }) => void }) => {
         return {
             [TYBALT_COMPONENT_DEFINITION](node: TSESTree.CallExpression) {
                 const definition = node.arguments[0];
@@ -65,4 +67,4 @@ const rule: RuleModule<'singleWordComponentName', never[], RuleListener> = creat
     },
 });
 
-export default rule;
+module.exports = rule;

packages/eslint-plugin/src/rules/index.ts

@@ -1,9 +1,5 @@
-// @ts-ignore
-import { RuleListener, RuleModule } from '@typescript-eslint/utils/ts-eslint';
-import componentNamesAreMultiWord from './component-names-are-multi-word.js';
+const componentNamesAreMultiWord = require('./component-names-are-multi-word.js');
 
-const config = {
+module.exports = {
     'component-names-are-multi-word': componentNamesAreMultiWord,
 };
-
-export default config;

packages/eslint-plugin/src/utils/get-definition-key.ts

@@ -1,6 +1,7 @@
-import { AST_NODE_TYPES, TSESTree } from '@typescript-eslint/utils';
+import type { TSESTree } from '@typescript-eslint/types';
+const { AST_NODE_TYPES } = require('@typescript-eslint/types');
 
-export default ({
+module.exports = ({
     key,
     node,
 }: {
@@ -13,8 +14,8 @@ export default ({
         }
 
         if (
-            (property.key.type === AST_NODE_TYPES.Literal && property.key.value === key) ||
-            (property.key.type === AST_NODE_TYPES.Identifier && property.key.name === key)
+            (property.key.type === AST_NODE_TYPES.Literal && (property.key as TSESTree.Literal).value === key) ||
+            (property.key.type === AST_NODE_TYPES.Identifier && (property.key as TSESTree.Identifier).name === key)
         ) {
             return property;
         }

packages/eslint-plugin/src/utils/selectors.ts

@@ -1,2 +1,5 @@
-export const TYBALT_COMPONENT_DEFINITION =
-   'CallExpression[callee.name="defineComponent"]'
+const TYBALT_COMPONENT_DEFINITION = 'CallExpression[callee.name="defineComponent"]';
+
+module.exports = {
+    TYBALT_COMPONENT_DEFINITION,
+};

packages/eslint-plugin/tsconfig.json

@@ -4,7 +4,6 @@
        "module": "commonjs",
        "sourceMap": false,
        "outDir": "dist",
-       "esModuleInterop": true,
        "moduleResolution": "node16",
        "forceConsistentCasingInFileNames": true,
        "strict": true,

packages/eslint-plugin/tst/component-names-are-multi-word.test.ts → packages/eslint-plugin/tst/component-names-are-multi-word.test.js

@@ -1,13 +1,15 @@
-import { RuleTester } from '@typescript-eslint/rule-tester';
-import rule, { MessageIds, RULE_NAME } from '../src/rules/component-names-are-multi-word';
+/* eslint-disable no-undef */
 
-const ruleTester: RuleTester = new RuleTester({
+const { RuleTester } = require('@typescript-eslint/rule-tester');
+const rule = require('../src/rules/component-names-are-multi-word');
+
+const ruleTester = new RuleTester({
     parser: require.resolve('@typescript-eslint/parser'),
 });
 
-const messageId: MessageIds = 'singleWordComponentName';
+const messageId = 'singleWordComponentName';
 
-ruleTester.run(RULE_NAME, rule, {
+ruleTester.run('component-names-are-multi-word', rule, {
     valid: [
         `
       export default defineComponent({

packages/test-utils/src/global.d.ts

@@ -1,3 +1,5 @@
+/* eslint-disable no-var */
+
 declare module globalThis {
     var customElementsRegistry: Map<string, CustomElementConstructor>;
     var customElementsReverseRegistry: Map<CustomElementConstructor, string>;

packages/test-utils/src/types.d.ts

@@ -1,10 +1,10 @@
-export type AttributeObject = Object<string, number | string>;
+export type AttributeObject = NonNullable<string, number | string>;
 
 type DOMTokenListOrBoolean<T> = T extends string ? boolean | null : Array<string>;
-type NamedNodeMapOrString<T> = T extends string ? string | null | never : Object;
+type NamedNodeMapOrString<T> = T extends string ? string | null | never : NonNullable<unknown>;
 
 export interface Wrapper {
-    length: Number;
+    length: number;
     find(selector: string): Wrapper | never;
     findAll(selector: string): Wrapper | never;
     findComponent(definition: CustomElementConstructor): Wrapper | never;

packages/test-utils/src/util/base-wrapper.ts

@@ -27,7 +27,7 @@ const reassignSlot = (element: Element): Element => {
     return clone;
 };
 
-const stringifyElement = (element: Element): String => {
+const stringifyElement = (element: Element): string => {
     if (element.tagName === 'SLOT') {
         element = reassignSlot(element);
     }
@@ -47,15 +47,15 @@ const stringifyElement = (element: Element): String => {
     return `${openingTag}>${children}${closingTag}>`;
 };
 
-const stringifyShadowRoot = (shadowRoot: ShadowRoot): String => {
+const stringifyShadowRoot = (shadowRoot: ShadowRoot): string => {
     return Array.from(shadowRoot.children).reduce((acc, childElement) => {
         return acc + stringifyElement(childElement);
     }, '');
 };
 
 export default class BaseWrapper implements Wrapper {
     element: Element;
-    get length(): Number {
+    get length(): number {
         return 1;
     }