manfred export package

How to add a new manfred export package

Create workspace's package.json from monorepo root path with the package name, for example manfred2html:

npm init -y -w ./packages/manfred2html

Add the @lemoncode scope to the package.json name property:

./packages/manfred2html/package.json

{
- "name": "manfred2html",
+ "name": "@lemoncode/manfred2html",
  "version": "1.0.0",
...
}

Copy/update the rest package.json properties from another package, for example manfred2word:

./packages/manfred2html/package.json

{
  "name": "@lemoncode/manfred2html",
- "version": "1.0.0",
+ "version": "0.0.0",
- "description": "",
+ "description": "Tool to export Manfred CV format to html.",
- "main": "index.js",
- "devDependencies": {},
+ "private": false,
+ "sideEffects": false,
+ "files": [
+   "dist"
+ ],
+ "module": "./dist/manfred2html.js",
+ "main": "./dist/manfred2html.umd.cjs",
+ "types": "./dist/index.d.ts",
+ "exports": {
+   ".": {
+     "import": "./dist/manfred2html.js",
+     "require": "./dist/manfred2html.umd.cjs",
+     "types": "./dist/index.d.ts"
+   }
+ },
+ "type": "module",
  "scripts": {
-   "test": "echo \"Error: no test specified\" && exit 1"
+   "start": "npm run build -- --mode development --watch",
+   "build": "vite build",
+   "type-check": "tsc --noEmit",
+   "type-check:watch": "npm run type-check -- --watch",
+   "test": "jest -c ./config/test/jest.js",
+   "test:watch": "npm test -- --watchAll -i"
  },
- "repository": {
-   "type": "git",
-   "url": "git+https://github.com/Lemoncode/manfred-export-app.git"
- },
- "keywords": [],
- "author": "",
- "license": "ISC",
- "bugs": {
-   "url": "https://github.com/Lemoncode/manfred-export-app/issues"
- },
- "homepage": "https://github.com/Lemoncode/manfred-export-app#readme"
+ "keywords": [
+   "manfred2html",
+   "manfred export",
+   "manfred export html",
+   "manfred export to html"
+ ],
+ "author": "Lemoncode",
+ "license": "MIT",
+ "repository": {
+   "type": "git",
+   "url": "git+https://github.com/Lemoncode/manfred-export-app.git",
+   "directory": "packages/manfred2html"
+ },
+ "homepage": "https://github.com/Lemoncode/manfred-export-app/tree/main/packages/manfred2html"
}

Install dev dependencies (from monorepo root path):

npm install -D -w @lemoncode/manfred2html @lemoncode/tsconfig @types/jest jest ts-jest typescript vite vite-plugin-dts

Install dependencies (from monorepo root path):

npm install -P -w @lemoncode/manfred2html @lemoncode/manfred-common ejs

npm install -D -w @lemoncode/manfred2html @types/ejs

Replace lemoncode dependencies versions by *:

./packages/manfred2html/package.json

{
...
  "devDependencies": {
-   "@lemoncode/tsconfig": "^0.0.0",
+   "@lemoncode/tsconfig": "*",
    "@types/ejs": "^3.1.2",
    "@types/jest": "^29.5.3",
    "jest": "^29.6.2",
    "ts-jest": "^29.1.1",
    "typescript": "^5.1.6",
    "vite": "^4.4.9",
    "vite-plugin-dts": "^3.5.2"
  },
  "dependencies": {
-   "@lemoncode/manfred-common": "^0.0.0",
+   "@lemoncode/manfred-common": "*",
    "ejs": "^3.1.9"
  }
}

Copy config files: vite.config.ts, tsconfig.json, src/vite-env.d.ts and config folder.

Update vite.config:

./packages/manfred2html/vite.config.ts

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import { fileURLToPath } from 'node:url';

export default ({ mode }) =>
  defineConfig({
    plugins: [dts()],
    build: {
      lib: {
        entry: 'src/index.ts',
-       name: 'Manfred2Word',
+       name: 'Manfred2Html',
      },
      sourcemap: mode === 'development',
    },
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
  });

Create index file:

./packages/manfred2html/src/index.ts

// TODO: Replace with package exports
export const exampleFn = () => {
  console.log('Manfred2Html');
}

Add dummy spec to avoid CI failure:

./packages/manfred2html/src/index.spec.ts

// TODO remove this file when implement real tests

describe('TODO: remove this dummy spec', () => {
  it('should be defined', () => {
    expect(true).toBeDefined();
  });
});

Install package in react app:

npm i -P -w react-app @lemoncode/manfred2html

Replace version by *:

./apps/react-app/package.json

{
...
  "dependencies": {
    "@emotion/css": "^11.10.6",
    "@fontsource/inter": "^5.0.3",
    "@fontsource/sanchez": "^5.0.3",
-   "@lemoncode/manfred2html": "^0.0.0",
+   "@lemoncode/manfred2html": "*",
    "@lemoncode/manfred2md": "*",
    "@lemoncode/manfred2word": "*",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1"
  },
...

}

Start react app:

npm run start:react

Try to import the new package:

./apps/react-app/src/app.tsx

import { RouterComponent } from '@/core';
import { UserChoiceProvider } from './core/user-choice/user-choice.provider';
import './app.global-styles';
+ import { exampleFn } from '@lemoncode/manfred2html';

+ exampleFn();

export const App = () => {
  return (
    <UserChoiceProvider>
      <RouterComponent />
    </UserChoiceProvider>
  );
};