Getting Started with Atoms
Atoms allows developers to replace components in their Thought Industries instance with components they have developed themselves. When rendering components in the Thought Industries platform, if a suitable Atom replacement is found in the window.TiAtoms property, the provided component will be rendered instead. The props and actions that would regularly be passed to the Thought Industries component will be passed to the Atom component instead.
Requirements
If you would like to update a project to include Atoms, there are several requirements that need to be met:
1) An authenticated Helium project
2) Within the Helium project, there must be an /atoms/ directory in the project root. Within the atoms directory, there should be an index.{js|ts} file assigning any components you would like to deploy to window.TiAtoms as seen here.
Note: The name of the component file must be the same as the component it's intended to replace. For example: this file would be rendered anywhere the Thought Industries platform would render an
AudioPlayerBarcomponent.
3) A vite.atoms.config.ts file within the Helium project, as seen here
4) Must include @thoughtindustries/helium at version 1.2.0-beta.1 or higher in your project's dependencies.
5) Must update package.json#scripts with these commands:
"build:vite": "vite build",
"build:atoms": "vite build -c vite.atoms.config.ts && vite build"
Environment Variables
To use a environment variable in an Atom, prefix the variable with ‘VITE_’.
# Example public variables
VITE_APP_VERSION='v1'
Environment Variables should not contain secrets as they are processed client side.