Design System Previewer
This previewer is intended to work with the Salesforce Lightning Design System.
Installation
npm install @salesforce-ux/design-system-previewer --save-dev
Usage
const createPreviewer = require('@salesforce-ux/design-system-previewer');
const previewer = createPreviewer({
// where are your static assets
publicPath: {
'/assets': [ path.resolve(__dirname, '../assets') ] // this uses express.static under the hood
},
// where is your css?
cssUrl: '/assets/styles/index.css',
// get me some comments as a string
getComments: (done) => done(null, "all comments in system"),
// get me some markup for a component/variant
getMarkup: (component, variant, done) => done(null, "get Component/Variant markup"),
});
previewer.listen(3003, ({ server, emit }) => {
// when your css changes
emit('style');
// when your markup changes
emit('markup');
// when your annotations changes
emit('comments');
console.log(`Previewer available at: http://localhost:${server.address().port}/preview`);
});
Development
This project is meant to run by https://github.com/salesforce-ux/design-system
The command (from design-system) is npm run previewer-dev
Any changes should live reload from that point on.
Licenses
Source code is licensed under BSD 3-Clause