API specific framework independent store

[mozey]

@flumonion

There should be a Stock2ShopStore.ts object that is specific to routes defined on an API (e.g. stock2shop.com or WooCommerceStore.ts for WooCommerce), but independent from the JavaScript framework (e.g. VueJS, React or Angular).

The store

• provides pub/sub,
• getters and setters
• and makes HTTP requests, possibly caching results.

Components are isolated from the rest of the page with Shadow DOM, however they can share state via a global stores2s namespace, with services s2s.store and s2s.cart. See https://github.com/stock2shop/cart/pull/5#issuecomment-774104315 re Javascript SDK. Side note, the components have default styling. However, since components have open shadow-root, the page can override the default styling with custom CSS (keeping in mind recent encapsulation restrictions).

At a bare minimum the user must include a JS file, and create markup with custom elements, for example

<script src="s2s-cart.js"></script>
The price for {{ product }} is <s2s-price sku="abc123"></s2s-price>

Where s2s-cart.js might be constructed like this for Stock2Shop and VueJS

cat vue-1.2.3.js > s2s-cart.js
cat s2s-store.js >> s2s-cart.js
cat vuejs/s2s-price.js >> s2s-cart.js

Or like this for WooCommerce and React

cat react-1.2.3.js > s2s-cart.js
cat s2s-store-woocommerce.js >> s2s-cart.js
cat react/s2s-price.js >> s2s-cart.js

[mozey]

Note that the framework is not bundled with the components. The reasons for this are

• developers might want to use a different framework version from the one the component was built with, if it's a minor version change they can probably get away with it
• when a new version of the frameworks comes out, the bundle file (s2s-cart.js) can be refreshed without having to rebuild all the components
• developers might not want to use the bundle file, and instead include components (e.g. Price.vue) directly into their Vue app

[mozey]

Data Flow Diagram between s2s namespace, components and external APIs

[mozey]

The diagram above shows store giving components a copy of its internal data structure. That obviously's a good idea, we want to restrict the components to using getters (and maybe setters) on the global namespace s2s.

For VueJS components, above can be implemented using a Simple Store Pattern. The components may set data returned by getters on their privateState.

Above diagram does not currently describe sharedState, as it's not yet needed, but keep it in mind in case it's needed for something in the future.

Components must respect convention and not mutate store data directly, i.e. the sharedState is read only