ScopeX
ScopeX is a framework for building standalone and scoped web experiences that can be easily plugged in and used on any webpage. It takes in HTML, SCSS, and JS files and generates corresponding production-ready scopexperiences, which are self-contained packages containing HTML, CSS, and JS files that are designed to look and function the same no matter where they are inserted.
To use ScopeX, you will need to have Node v16 and Yarn installed on your machine. To install dependencies and build scopexperiences, run the following commands:
yarn init
yarn add @sogody/scopexjs
yarn scopex src
yarn scopex build [component]
yarn scopex build
yarn scopex serve
Development Environment
To enter the development environment and set the page and insertion selector, use the following command:
yarn scopex dev <component> <injection point> [url]
For example, yarn scopex dev banner body https://sogody.com will set the development environment to work on the "banner" component, with the insertion point being the class selector ".class", and the development server being hosted at "https://sogody.com".
Bootstrap src files
To bootstrap the scopex source files run:
yarn scopex src
Scaffolding experiences
To scaffold a new component in the scopex file structure run:
yarn scopex scaffold <component name>
Build
To build all components and generate production-ready scopexperiences in the dist folder, run:
yarn scopex build
Additional features
ScopeX has a number of features, including a scoped HTML parser, a scoped SCSS parser, a scoped JS parser, a development environment with an insertion point, and support for single-file bundles (HTML + CSS + JS in one file). It also has consistent scoping based on filename hashes, allows for the extraction of framework configurations into a scopex.json file, and supports the import of SCSS files into JS files. It includes a component generator with yarn scopex scaffold, can fix single-component build bugs, has structured component configurations and templating, and has graceful error handling to prevent crashes. It also provides a solution for package importing and bundling using CommonJS.
ScopeX plans to implement linting and code checks using tools such as ESLint and stylelint.