@ssfbank/ssf-microfe-svelte NPM

SSF Micro frontend components

Local development before publishing to dev

npm run storybook` has hot reloading and gives you possibility of very isolated tweaks of the component.

Test with a prerelease version before pushing to master

Create a npm prerelease version by changing version in package.json.

If the last version was 1.1.0 and you plan on doing 1.2.0 change to this:

"version": "1.2.0-alpha.0"

Then do npm publishas usual.

Then you iterate on that with alpha.1 etc until you wanna push to master with "1.2.0" and npm publish that.

How to include the bundles in HTML after publish

This repo is ES6+, that means modules support and less boilerplate.

We use Roboto for now until we get a proper CDN for Atlas Grotesk.

Thymeleaf / Spring (or other SSRs with MVC data pattern)

<!doctype html>
<html>
<head>
	<title>Demo</title>
    <link href="https:///unpkg.com/@ssfbank/ssf-microfe-svelte@^1/dist/styles.css" rel="stylesheet"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap"
    rel="stylesheet"
    />
</head>
<body>

    <div id="mountpoint"/>
    <script th:if="priceCategory" th:inline="javascript" type="module">
        import { PriceCategoryTabs } from "https://unpkg.com/@ssfbank/ssf-microfe-svelte@^1/dist/ssf-price-category-tabs.js";

        new PriceCategoryTabs({
                target: document.getElementById("svelte-category"),
                props: {
                    priceCategory: /*[[${priceCategory}]]*/ null
                }
        });
    </script>
</body>
</html>

Vanilla HTML with clientside data (like Dynamics CRUM)

<!doctype html>
<html>
<head>
	<title>Demo</title>
    <link href="https:///unpkg.com/@ssfbank/ssf-microfe-svelte@^1/dist/styles.css" rel="stylesheet"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
    href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,400;1,500&display=swap"
    rel="stylesheet"
    />
</head>
<body>
    <div id="mountpoint"/>
    <script type="module">
        import { PriceCategoryTabs } from "https://unpkg.com/@ssfbank/ssf-microfe-svelte@^1/dist/ssf-price-category-tabs.js";

        fetch('/api/crum/entitysoup/1').then(entity => {
        new PriceCategoryTabs({
                target: document.getElementById("svelte-category"),
                props: {
                    priceCategory: /*[[${priceCategory}]]*/ null
                }
            });
        });
    </script>
</body>
</html>

svelte

lodash

@infinitebrahmanuniverse/nolb-_ss @everything-registry/sub-chunk-862

3 years ago

3 years ago

3 years ago

3 years ago