Security News
pnpm 10.0.0 Blocks Lifecycle Scripts by Default
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
@loophq/design-system
Advanced tools
npm i -S @loophq/design-system focus-visible
Focus-visible is a polyfill for the :focus-visible pseudo-class and needs to be installed as a peer dependency. Vue 2.6 is also a peer dependency, we're assuming you have that installed already. :)
In your entry point (src/main.js for a standard vue-cli/vite project), put these two lines at the top:
import 'focus-visible';
import '@loophq/design-system/dist/loop-design-system.css';
focus-visible
is used to manage all focus styles. If you don't include this line, the library will fall back to the browser focus styles. The CSS file needs to be included, it contains all of the CSS custom properties and component CSS for the design system. If you'd like to change a variable (there are a few theme variables), we recommend importing this file here as a base and then overwriting it in your own global css file. This should be imported before your App.vue
;
Components can be imported via named imports:
import { BaseCard } from '@loophq/design-system';
To import all and register globally (not recommended), put this in your main.js:
import LoopComponents from '@loophq/design-system';
app.use(LoopComponents);
npm i
This spins up a local storybook server and runs unit tests in parallel, recompiling and rerunning relevant tests where needed.
npm run dev
npm run library:build
npm run library:publish -- <version>
To add a tag (for beta versions, etc)
npm run library:publish -- <version> <tag>
Make sure to push the updates that npm makes when publishing to your release branch before merging into main. You always want to publish the new version from your release branch, as we cannot push directly to main. See the releasing section for more info.
npm run build-storybook
If this is your first time releasing, ask in the engineering team channel to be added to the loop npm organization. Make sure you log in to npm in your terminal as well.
On your machine, check out the branch you'd like to release. This can either be a feature branch or a release branch if you have multiple features to package together as a release. This branch should be PRed into main
and be approved by a peer before releasing.
Compile the component library
npm run library:build
(Optional) Commit any file changes the build script made. This is not always necessary but when adding new components this will generally be necessary.
Figure out the version number this release will be. We follow SemVer, and the general rule of thumb is that if you're adding new components, bump the minor version, everything else should just bump the patch version. Major versions bumps are rare and should be a team decision.
Publish the library to npm. Make sure you are on the branch you intend to release, this will modify your package.json
and you MUST be on a non-main
branch for this to be mergeable.
npm run library:publish -- <version> <tag>
Push all changes the build and release scripts made to Github.
In Github, merge the release branch into main.
FAQs
## Installation (into another repo)
We found that @loophq/design-system demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.