Utils for using the parcelLab js plugin with different frameworks (react/vue) and as web-component.
Check out the documentation on the parcelLab track & trace JS plugin beforehand to see what options are available.
First install the @parcellab/js-plugin-utils package:
npm i @parcellab/js-plugin-utils
For usage with react/next/... : (React needs to be installed...)
import TrackAndTrace from '@parcellab/js-plugin-utils/v5/react'
export default function MyPageComponent() {
const options = {...}
// ...
return(
<div>
{/* ... */}
<TrackAndTrace options={options} />
</div>
)
}If needed, you can still reference the older plugin's version:
import TrackAndTrace from '@parcellab/js-plugin-utils/v3/react'
For usage with vue/nuxt/... : (Vue needs to be installed...)
<template>
<TrackAndTrace :options="{...}" />
</template>
<script>
import TrackAndTrace from '@parcellab/js-plugin-utils/v5/vue'
export default {
components: {
TrackAndTrace
}
}
</script>If needed, you can still reference the older plugin's version:
import TrackAndTrace from '@parcellab/js-plugin-utils/v3/vue'
For usage directly within your web application or web page:
On your application's main js file, you can directly import the web component dependency.
import "@parcellab/js-plugin-utils/v5/web";And later run it from the HTML file where your app's bundled js will be included
<!DOCTYPE html>
<html lang="en">
<head>
<script src="your-app-bundle.min.js"></script>
</head>
<body>
<track-and-trace></track-and-trace>
</body>
</html>Otherwise, you can simply import directly from our CDN
<!DOCTYPE html>
<html lang="en">
<head>
<script async src="https://cdn.parcellab.com/js/v5/web-components/oder-status.js"></script>
</head>
<body>
<track-and-trace></track-and-trace>
</body>
</html>For customisation, options can be defined and attached to the window object. This should happen before the component is initialised. Ex:
<body>
<script>
window.parcelLabTrackAndTraceOptions = {} // options object goes here
</script>
<track-and-trace />
</body>The older plugin's version is not available as a web component.
These components are built to automatically pull the newest version of our prebuilt Style Sheets from our CDN.
If you would like to omit these and build your own styles - you can disable the fetching by setting the param disableDefaultStyles to true.
import TrackAndTrace from '@parcellab/js-plugin-utils/v5/react'
export default function MyPageComponent() {
const options = {...}
// ...
return(
<div>
{/* ... */}
<TrackAndTrace options={options} disableDefaultStyles={true} />
</div>
)
}window.disableDefaultStyles = true;npm install
npm test # vitest + jsdom
npm run build # regenerate the published artifactssrc/ is not what npm ships. The files under v3/ and v5/ are checked-in
build output, produced from src/ by npm run build (buble for React, vue-cli
for Vue). Editing src/ alone changes nothing for customers.
Any change therefore needs three steps:
- edit the file in
src/ - run
npm run build - commit
src/and the regeneratedv3//v5/files together
CI enforces this: the test workflow rebuilds and fails if the committed
artifacts differ from what src/ produces.
Note that merging to main only redeploys the web component to the CDN. The
React and Vue entry points are published to GitHub Packages by hand
(npm publish), so a merged fix is not a released fix.
With the release of the major version 1.0.0, the import paths have changed. It is now required that the plugin's version is specified within the path. Ex:
| Before | Now |
|---|---|
| import TrackAndTrace from '@parcellab/js-plugin-utils/react' | import TrackAndTrace from '@parcellab/js-plugin-utils/v5/react' |
Vue 2.0 is also no longer supported, instead you should now use Vue 3.0.