add formatting and linting to rc package

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true
+}

packages/receipt-components/.eslintignore

@@ -1 +1,2 @@
-dist/*
+dist
+node_modules

packages/receipt-components/.eslintrc.js

@@ -5,16 +5,13 @@ module.exports = {
     node: true,
     jest: true,
   },
-  extends: ['eslint:recommended', 'prettier'],
+  extends: [
+    "eslint:recommended",
+    "prettier, plugin:@typescript-eslint/recommended",
+  ],
   parserOptions: {
     ecmaVersion: 12,
-    sourceType: 'module',
-  },
-  plugins: ['prettier'],
-  rules: {
-    indent: ['error', 2, { SwitchCase: 1 }],
-    'linebreak-style': ['error', 'unix'],
-    quotes: ['error', 'single'],
-    semi: ['error', 'always'],
+    sourceType: "module",
   },
+  plugins: ["prettier", "@typescript-eslint"],
 };

packages/receipt-components/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "endOfLine": "lf",
+  "arrowParens": "always"
+}

packages/receipt-components/package.json

@@ -17,6 +17,8 @@
     "build": "tsup",
     "preview": "vite preview",
     "start": "vite build && node dist/main.js",
+    "lint": "eslint --ignore-path .eslintignore --ext .js,.ts && tsc",
+    "format": "prettier --ignore-path .eslintignore --write \"**/*.+(js|ts|json)\"",
     "test": "vitest",
     "test:unit": "vitest run",
     "coverage": "vitest --coverage",
@@ -25,7 +27,12 @@
   "devDependencies": {
     "@resaleai/receipt-renderer": "workspace:*",
     "@types/node": "^20.10.5",
+    "@typescript-eslint/eslint-plugin": "^6.17.0",
+    "@typescript-eslint/parser": "^6.17.0",
     "@vitest/coverage-v8": "^0.34.6",
+    "eslint": "^8.56.0",
+    "eslint-config-prettier": "^9.1.0",
+    "prettier": "^3.1.1",
     "tsup": "^7.2.0",
     "typescript": "^5.3.3",
     "vite": "^4.5.1",

packages/receipt-components/src/errors.ts

@@ -1,6 +1,6 @@
 export class InvalidRendererError extends Error {
   constructor(msg: string) {
     super(msg);
-    this.name = 'InvalidRendererError';
+    this.name = "InvalidRendererError";
   }
 }

packages/receipt-components/src/main.ts

@@ -1,6 +1,6 @@
-import escPosRendererPlugin from '@resaleai/receipt-escpos-renderer';
-import { ReceiptComponent } from './receipt-component';
-import { RendererName } from '@resaleai/receipt-plugin';
+import escPosRendererPlugin from "@resaleai/receipt-escpos-renderer";
+import { ReceiptComponent } from "./receipt-component";
+import { RendererName } from "@resaleai/receipt-plugin";
 
 declare global {
   interface RendererMap {

packages/receipt-components/src/receipt-component.ts

@@ -3,13 +3,13 @@ import {
   ReceiptASTNodeRegistry,
   nodeRegistry,
   parseTemplateForAst,
-} from '@resaleai/receipt-ast';
+} from "@resaleai/receipt-ast";
 import {
   RCNodePlugin,
   RCRendererPlugin,
   RendererName,
-} from '@resaleai/receipt-plugin';
-import { InvalidRendererError } from './errors';
+} from "@resaleai/receipt-plugin";
+import { InvalidRendererError } from "./errors";
 
 interface ReceiptComponentOptions<TProps> {
   render: (props: TProps) => string; // render function should return a template
@@ -63,7 +63,10 @@ export class ReceiptComponent<TProps> {
     // iterate through all node plugins and register render functions
     this.nodePlugins.forEach((plugin) => {
       if (plugin.renderers[renderer.name]) {
-        renderer.registerRenderFunc(plugin.name, plugin.renderers[renderer.name]);
+        renderer.registerRenderFunc(
+          plugin.name,
+          plugin.renderers[renderer.name]
+        );
       }
     });
   }
@@ -73,13 +76,13 @@ export class ReceiptComponent<TProps> {
     nodes.forEach((node) => {
       // warn when node is already registered, as this may cause unexpected behavior
       if (this.astBuilders[node.name]) {
-        console.warn('Node already registered', node.name);
+        console.warn("Node already registered", node.name);
       }
       this.astBuilders[node.name] = node.buildNode;
       this.nodePlugins.push(node);
       for (const name of node.aliases ?? []) {
         if (this.astBuilders[name]) {
-          console.warn('Node already registered', name);
+          console.warn("Node already registered", name);
         }
         this.astBuilders[name] = node.buildNode;
       }
@@ -96,10 +99,12 @@ export class ReceiptComponent<TProps> {
 
   static use(plugins: (RCNodePlugin<any> | RCRendererPlugin)[]) {
     const nodes = plugins.filter(
-      (plugin): plugin is RCNodePlugin<any> => (plugin as RCNodePlugin<any>).buildNode !== undefined
+      (plugin): plugin is RCNodePlugin<any> =>
+        (plugin as RCNodePlugin<any>).buildNode !== undefined
     );
     const renderers = plugins.filter(
-      (plugin): plugin is RCRendererPlugin => (plugin as RCRendererPlugin).renderer !== undefined
+      (plugin): plugin is RCRendererPlugin =>
+        (plugin as RCRendererPlugin).renderer !== undefined
     );
     this.registerNodes(nodes);
     renderers.forEach((renderer) => this.registerRenderer(renderer));

packages/receipt-components/test/helpers/dummies.ts

@@ -1,22 +1,22 @@
-import { ReceiptComponent } from '@/receipt-component';
-import { RCNodePlugin, RCRendererPlugin } from '@resaleai/receipt-plugin';
+import { ReceiptComponent } from "@/receipt-component";
+import { RCNodePlugin, RCRendererPlugin } from "@resaleai/receipt-plugin";
 import {
   CoreReceiptRenderer,
   buildReceiptRenderer,
-} from '@resaleai/receipt-renderer';
-import { vi } from 'vitest';
+} from "@resaleai/receipt-renderer";
+import { vi } from "vitest";
 
 export const dummyNodePlugin: RCNodePlugin<null> = {
-  name: 'dummyNode',
-  buildNode: vi.fn(() => ({ name: 'dummy', props: null })),
+  name: "dummyNode",
+  buildNode: vi.fn(() => ({ name: "dummy", props: null })),
   renderers: {
     dummyRenderer: vi.fn(async (props: null) => ({})),
   },
 };
 export const dummyNodePluginWithAlias: RCNodePlugin<null> = {
-  name: 'dummyNode',
-  aliases: ['dmy'],
-  buildNode: () => ({ name: 'dummy', props: null }),
+  name: "dummyNode",
+  aliases: ["dmy"],
+  buildNode: () => ({ name: "dummy", props: null }),
   renderers: {
     dummyRenderer: vi.fn(async (props: null) => ({})),
   },
@@ -25,14 +25,14 @@ export const dummyNodePluginWithAlias: RCNodePlugin<null> = {
 export const [dummyRenderFuncRegistry, dummyRegisterFunc] =
   buildReceiptRenderer({} as CoreReceiptRenderer<any>);
 
-export const dummyRenderer = vi.fn((ast: any) => '' as any);
+export const dummyRenderer = vi.fn((ast: any) => "" as any);
 
 export const dummyRendererPlugin: RCRendererPlugin = {
-  name: 'dummyRenderer',
+  name: "dummyRenderer",
   renderer: dummyRenderer,
   registerRenderFunc: dummyRegisterFunc,
 };
 
-export const dummyComponent = new ReceiptComponent('dummyComponent', {
-  render: vi.fn(() => ''),
+export const dummyComponent = new ReceiptComponent("dummyComponent", {
+  render: vi.fn(() => ""),
 });