Prismm Frontend Docs

Appearance

Repository Overview ​

This repository is a TypeScript monorepo, utilizing Turborepo to manage the monorepo workflows, Yarn Workspaces for package management, and Vite for the build process.

TypeScript ​

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. It provides optional static typing, classes, and interfaces—one of the big draws for adopting TypeScript is its ability to improve code quality and understandability which makes it easier to maintain and debug.

You can read more about TypeScript and find it's full documentation here.

Turborepo ​

Turborepo is a high-performance build system for JavaScript and TypeScript codebases that enables efficient handling of build tasks across multiple projects in a monorepo. It allows for intelligent caching of builds and dependencies to speed up testing and deployment processes.

You can read more about Turborepo and find it's full documentation here.

Yarn Workspaces ​

Yarn Workspaces is a feature of Yarn that allows you to manage dependencies of multiple packages within a single repository efficiently. It enables you to install dependencies once at the root level rather than multiple times for each package, and it links dependencies together when possible. Adding New Connections To add new connections or dependencies between the packages within your monorepo, you can use Yarn Workspaces. Simply specify the dependency in your package.json file using the workspace protocol:

json
"dependencies": { 
    "some-package": "*" 
}

This method links the local package as a dependency, ensuring that you are working with the latest changes across your projects.

Vite ​

What's a monorepo? ​

A monorepo is a single repository that stores all of your code and assets for every project. It is a single repository that contains multiple projects, each of which can be built independently. This approach can greatly simplify dependency management, streamline the workflow processes, and foster code sharing and reuse across projects.

What is the difference between a monorepo and a multi-repo? ​

A monorepo is a single repository that contains multiple projects, each of which can be built independently. A multi-repo is a collection of multiple repositories that each contain a single project.

Folder Structure ​

  • apps: Contains all the applications in the monorepo.
  • packages: Contains all the shared packages in the monorepo.
  • packages-dev: Contains all the development packages in the monorepo (like eslint, plop, etc).
  • package.json: Contains the root dependencies for the monorepo, which are mostly dev dependencies.
  • .prettierrc: Contains the prettier configuration for the monorepo.
  • .husky: Contains the husky configuration for the monorepo, we use it for a hook making sure to enforce conventional commits and another hook to run eslint-fix and prettier before commits are made.
  • .lintstagedrc: Contains the lint-staged configuration for the monorepo, we use it to run prettier and eslint on staged files.
  • .gitignore: Contains the gitignore configuration for the monorepo.
  • Dockerfile: Contains the Dockerfile configuration for the monorepo.
  • .azure_pipelines: Contains the azure pipelines configuration for the monorepo.

Lit: ​

As mentioned here, we use Lit in our code for web components. We also use a HMR plugin that allows you to reload modules without a full refresh, as it currently is (there’s plans to update it and fix this issue) the HMR only occurs if the component is in the same module as the app you are currently running. This means for fast iterations it’s recommended to either use the storybook app, or prismm-component themselves to debug the components and iterate on them before putting them in the relevant folder afterwards.

In case you are interested in learning more about Lit, you can find the full documentation here.

Project Hiearchy: ​

Repo hiarchy

Framework structure: ​

Framework structure