Creating Gesso Packages

Create a new package

Create a new directory packages/YOUR_PACKAGE_NAME

Create a new directory: cd packages/YOUR_PACKAGE_NAME
Navigate to the directory: cd packages/YOUR_PACKAGE_NAME
Initialize the package: run pnpm init

note

NOTE: you will have to manually add some internal deps to devDependencies see below

{
  "name": "@acromedia/gesso-YOUR_PACKAGE_NAME",
  ...
  "publishConfig": {
    "@acromedia:registry": "https://git.acromedia.com/api/v4/projects/1149/packages/npm/"
  },
  "source": "src/index.ts",
  "module": "dist/index.esm.js",
  "main": "dist/index.cjs.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "build": "rollup -c --bundleConfigAsCjs && pnpm rimraf acromedia*.tgz && pnpm pack",
    "test": "cypress run --component --browser chrome",
    "test:debug": "CYPRESS_REMOTE_DEBUGGING_PORT=9222 cypress open --component --browser chrome",
    "test:ci": "cypress run --component --browser chrome",
    "lint": "eslint src && prettier src --check",
    "lint:fix": "eslint src --fix && prettier src --write",
  },
  "devDependencies": {
      "@acromedia/eslint-config": "workspace:*",
      "@acromedia/config": "workspace:*",
      "@acromedia/webpack-config": "workspace:*",
  }
...
}

Install development dependencies

pnpm i -D typescript rollup @rollup/plugin-typescript rollup-plugin-dts rollup-plugin-auto-external rimraf cypress webpack source-map-loader babel-loader react react-dom eslint eslint-config-prettier eslint-config-cypress eslint-plugin-no-only-tests prettier

Explanation of devDependencies

Bundling: rollup @rollup/plugin-typescript rollup-plugin-dts rollup-plugin-auto-external rimraf
Testing: cypress webpack react react-dom source-map-loader babel-loader
Development / Lint / Formatting: typescript eslint eslint-config-prettier eslint-config-cypress eslint-plugin-no-only-tests prettier

Configure the devDependencies

Create the tsconfig.json

tip

Gesso extends a predefined configuration from @acromedia/config:react-library.json If you are creating your own custom package you can use that as your default and add the following lines instead of extending.

{
  "extends": "@acromedia/config/tsconfig/react-library.json",
  "compilerOptions": {
    "outDir": "./dist",
  },
  "esModuleInterop": true,
  "exclude": [
    "dist"
  ],
  "include": [
    "./*.d.ts",
    "src/**/*",
    "cypress.config.ts"
  ]
}

Create rollup.config.js

// rollup.config.js
import typescript from "@rollup/plugin-typescript";
import dts from "rollup-plugin-dts";
import autoExternal from "rollup-plugin-auto-external";

import pkg from "./package.json";

const config = [
  {
    input: pkg.source,
    output: [
      { file: pkg.main, format: "cjs", sourcemap: true },
      { file: pkg.module, format: "esm", sourcemap: true },
    ],
    plugins: [
      typescript({
        sourceMap: true,
        exclude: ["**/*.spec.ts*"],
      }),
      autoExternal(),
    ],
  },
  {
    input: "dist/src/index.d.ts",
    output: [
      {
        file: "dist/index.d.ts",
        format: "es",
      },
    ],
    plugins: [dts.default()],
  },
];

export default config;

Create .eslintrc.cjs

tip

Gesso extends a predefined configuration from @acromedia/eslint-config If you are creating your own custom package you can use that as your default and add the following lines instead of extending.

module.exports = {
  root: true,
  extends: ["@acromedia/eslint-config"],
  parser: "@typescript-eslint/parser",
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ["tsconfig.json"],
  },
  ignorePatterns: [".eslintrc.cjs", "webpack.config.js"],
};

Create .prettierrc.js

tip

Gesso extends a predefined configuration from @acromedia/config If you are creating your own custom package you can use that as your default and add the following lines instead of extending.

const baseConfig = require('@acromedia/config/prettierrc');

module.exports = {
  ...baseConfig,
};

Create cypress.config.ts

import 'dotenv/config';
import { defineConfig } from 'cypress';

export default defineConfig({
  chromeWebSecurity: false,
  component: {
    setupNodeEvents(on, config) {
      const newConfig = { ...config };

      newConfig.env.LIVE_TESTS = process.env.LIVE_TESTS;
      /*
        Add additional env variables as needed, they will be pulled from .env file
      */

      return newConfig;
    },
    specPattern: 'src/**/*.spec.{js,jsx,ts,tsx}',
    devServer: {
      framework: 'react',
      bundler: 'webpack',
    },
  },
});

Create webpack.config.js

tip

Gesso extends a predefined configuration from @acromedia/webpack-config If you are creating your own custom package you can use that as your default and add the following lines instead of extending.

note

Note: Webpack is not used for the build process, it is only used for testing with cypress.

const config = require('@acromedia/webpack-config');

config.mode = 'development';

config.module.rules = [
  ...config.module.rules,
  {
    test: /\.css$/i,
    use: ['style-loader', 'css-loader'],
  },
];

module.exports = {
  ...config,
  devServer: {
    port: 8086,
  },
};

Create babel.config.js

note

Note: Babel is not used for the build process, it is only used for testing with cypress. this extends the same configuration as @acromedia/webpack-config

const config = require('@acromedia/webpack-config');

config.mode = 'development';

config.module.rules = [
  ...config.module.rules,
  {
    test: /\.css$/i,
    use: ['style-loader', 'css-loader'],
  },
];

module.exports = {
  ...config,
  devServer: {
    port: 8086,
  },
};

Create example.env

note

Notes: This will used to set environment variables for cypress tests, you can add additional variables as needed.

LIVE_TESTS=TRUE

Confirm the build and test works

Create src/index.ts

/*
 * Example code used to confirm build works, delete this and add your code
 */
interface Test {
  data: string;
}

const test: Test = {
  data: 'test',
};

export { test, Test };

Run pnpm build to confirm the build works

Create a example test src/Example/index.spec.ts

describe('Example', () => {
  it('Should pass because this is an example', () => {
    const example = 'test';
    expect(example).equal('test');
  });
});

Run pnpm test to confirm the test works

Create a .gitignore file

Create a .gitignore file in the root of your package directory to specify which files and directories should be ignored by Git. Here's an example of a recommended .gitignore file:

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
node_modules
.pnp
.pnp.js
.pnpm-store
.npmrc

# testing
coverage
.nyc
.nyc_output
**/cypress/videos

# next.js
.next/
out/
build

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env.local
.env.development.local
.env.test.local
.env.production.local

# turbo
.turbo

/dist
yarn-error.log
.env
/coverage
gesso.config.json

This .gitignore file will help keep your repository clean by excluding common files and directories that shouldn't be tracked by version control.

Create a new package​

Install development dependencies​

Explanation of devDependencies​

Configure the devDependencies​

Confirm the build and test works​

Create a .gitignore file​

Create a new package

Install development dependencies

Explanation of devDependencies

Configure the devDependencies

Confirm the build and test works

Create a .gitignore file