@mergesoft/sparkup-web-client
v0.1.0
Published
sparkup-web-client
Downloads
802
Maintainers
tomasz.dolnyReadme
sparkup-web-client
Communication layer for web applications to work with Sparkup API. Includes common store to keep user and menu state.
Installation
npm install @mergesoft/sparkup-web-clientUsage in TypeScript
Import the package
import { DataService } from '@mergesoft/sparkup-web-client';Using the store
import { rootStore, store_actions } from "./store/rootStore";
// Read state once
const { user, menu } = rootStore.getState();
// Subscribe to changes (e.g. update DOM)
const unsubscribe = rootStore.subscribe(() => {
const state = rootStore.getState();
renderHeader(state.user);
renderMenu(state.menu);
});
// Trigger updates from events
document.getElementById("loginBtn")?.addEventListener("click", () => {
store_actions.user.setAuthenticated(true);
});
document.getElementById("toggleMenuBtn")?.addEventListener("click", () => {
store_actions.menu.toggle();
});Usage in JavaScript
Browser demo - no modules loader
- Publish the
index.browser.jsalongside your document or use a CDN like unpkg.
<html>
<head>
<script src="https://unpkg.com/@mergesoft/sparkup-web-client/dist/index.browser.js" type="text/javascript"></script>
<!-- <script src="./lib/swc/index.browser.js" type="text/javascript"></script> -->
<script type="text/javascript">
var swc=window.SparkupWebClient;
// swc.DataService, swc.store_actions, etc. are available
</script>
</head>
<body>
</body>
</html>Browser demo - with modules
- Publish the
index.mjsalongside your document (here atlib/swcsubdirectory) or use a CDN like unpkg.
<html>
<head>
<script type="module">
// import { rootStore, ... } from 'https://unpkg.com/@mergesoft/sparkup-web-client/dist/index.mjs';
import { rootStore, store_actions, DataService } from './lib/swc/index.mjs';
// Use the lib.
</script>
</head>
<body>
</body>
</html>Features
- 🚀 Communication layer for Sparkup API
- 📦 Built-in state management inspired by Zustand
- 🔧 TypeScript support
- 📘 ESM and CommonJS support
Debug Logging
The library includes internal debug logs. You can enable or disable them from your application at runtime.
TypeScript/ESM/CommonJS
import { setDebugLogging } from '@mergesoft/sparkup-web-client';
// Turn off debug logs
setDebugLogging(false);
// Later, turn on
setDebugLogging(true);Browser (global script)
<script src="https://unpkg.com/@mergesoft/sparkup-web-client/dist/index.browser.js"></script>
<script>
// Disable debug logs
window.SparkupWebClient.setDebugLogging(false);
// Enable later
window.SparkupWebClient.setDebugLogging(true);
// Read current state
console.log('Debug enabled?', window.SparkupWebClient.getDebugLogging());
</script>License
ISC © mergesoft