@soleil-se/app-util 5.5.2 → 5.6.1

package/CHANGELOG.md

@@ -1,10 +1,24 @@
-# Changelog
+---
+title: Changelog
+---
 
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [5.6.1] - 2023-12-13
+
+- Hydrate when children other than HTML Elements exist in target.
+- New argument for client side Svelte rendering for `hydrate`.
+
+## [5.6.0] - 2023-11-23
+
+- New constants: `isServer` and `isBrowser`.
+- New function: `generateId`.
+- Throw more clear error when JSON response can't be parsed in `fetchJson`.
+- Webpack support for usage with `@sitevision/sitevision-scripts`.
+
 ## [5.5.2] - 2023-08-28
 
 - Respect hash when updating URL parameters with `updateUrlParams` and `setUrlParams`.
@@ -159,7 +173,7 @@ See [MIGRATION](./MIGRATION.md).
 - App data import in client, `@soleil-api/webapp-util/app-data`.
 - `getViewUri` to get the URI that also renders the page.
 - `isOnline` to see if the app is online.
-- `vue` is now an optional depedency.  
+- `vue` is now an optional depedency.
 
 ## [2.0.0] - 2020-02-12
 

package/README.md

@@ -11,7 +11,7 @@ Utility functions for WebApps.
 ## Requirements
 
 * Sitevision 9.1.0 or later.  
-* `@soleil-se/sv-app-build` 1.0.0 or later.
+* `@soleil-se/sv-app-build@^1.0.0` or `@sitevision/sitevision-scripts@^3.0.0`.
 * WebApps 2 enabled app.
 
 ### Manifest
@@ -86,6 +86,26 @@ import { isOnline } from '@soleil-se/webapp-util';
 console.log(isOnline); // true or false
 ```
 
+### isServer : `Boolean`
+
+If the current code is running on the server.
+
+```js
+import { isServer } from '@soleil-se/webapp-util';
+
+console.log(isServer); // true or false
+```
+
+### isBrowser : `Boolean`
+
+If the current code is running in the browser.
+
+```js
+import { isBrowser } from '@soleil-se/webapp-util';
+
+console.log(isBrowser); // true or false
+```
+
 ### getNamespace([prefix]) ⇒ `String`
 
 Get a prefixed namespace unique for app.
@@ -110,6 +130,27 @@ console.log(getNamespace('decoration'));
 // For example: decoration_10_3871c02f1754f3aa8f9d4eb_12_70c3d424173b4900fc550e1c
 ```
 
+### generateId([prefix]) ⇒ `String`
+
+Generate a unique identifier with a random UUID without dashes.
+
+**Returns**: `String` - Unique identifier.
+
+| Param | Type | Default |
+| --- | --- | --- |
+| [prefix] | `string` | `"'id'"` |
+
+```js
+import { generateId } from '@soleil-se/webapp-util';
+
+console.log(generateId());
+// For example: id_550e8400e29b41d4a716446655440000
+
+console.log(generateId('input'));
+// For example: input_550e8400e29b41d4a716446655440000
+
+```
+
 ### getRouteUri(route, [query]) ⇒ `String`
 
 Get URI for a route.

package/client/fetch-json/index.js

@@ -7,25 +7,32 @@ function getUrl(uri, params) {
   return getRouteUri(uri, params);
 }
 
-function toJson(response) {
+async function toJson(response) {
+  const text = await response.text();
   try {
-    return response.json();
+    return JSON.parse(text);
   } catch (e) {
-    return {};
+    return undefined;
   }
 }
 
+async function handleError(response) {
+  const json = await toJson(response) || {};
+  const error = new Error(json?.message || response?.statusText);
+  Object.entries(json).forEach(([key, value]) => {
+    error[key] = value;
+  });
+  error.status = response.status;
+  throw error;
+}
+
 async function handleResponse(response) {
+  if (!response.ok) handleError(response);
+
   const json = await toJson(response);
-  if (!response.ok) {
-    const error = new Error(json?.message || response?.statusText);
-    Object.entries(json).forEach(([key, value]) => {
-      error[key] = value;
-    });
-    error.status = response.status;
-    throw error;
+  if (!json) {
+    throw new Error('Response could not be parsed as JSON.');
   }
-
   return json;
 }
 

package/client/svelte/index.js

@@ -14,11 +14,10 @@ export function render(App, {
   target,
   props,
   intro = false,
+  hydrate = target.hasChildNodes(),
 } = {}) {
   setAppProps(props);
 
-  const hydrate = target.childElementCount > 0;
-
   return new App({
     hydrate,
     target,

package/common/index.js

@@ -1,21 +1,9 @@
-/* eslint-disable global-require */
 import router from '@sitevision/api/common/router';
 import app from '@sitevision/api/common/app';
 
+import { nativeRequire } from '../server';
 import getLegacyRouteUri from './legacy/getRouteUri';
 
-/**
- * Get an ID for the app.
- * @return {String} ID
- */
-const getAppId = () => {
-  const id = (process.server
-    ? require('PortletContextUtil')?.getCurrentPortlet()?.getIdentifier()
-    : app?.portletId) || 'preview';
-
-  return id.replace('.', '_');
-};
-
 /**
  * Regex for selecting leading slashes
  * @constant {Regex}
@@ -28,18 +16,30 @@ const leadingSlashes = /^(\/)*/g;
  */
 const trailingSlashes = /(\/)*$/g;
 
+/**
+ * If the current code is running on the server.
+ * @constant {boolean}
+ */
+export const isServer = typeof process !== 'undefined' ? process.server : typeof window === 'undefined';
+
+/**
+ * If the current code is running in the browser.
+ * @constant {boolean}
+ */
+export const isBrowser = !isServer;
+
 /**
  * DOM friendly unique identifier for the WebApp.
  * @constant {string}
  */
-export const appId = getAppId();
+export const appId = (app?.portletId || 'preview').replace('.', '_');
 
 /**
  * If the WebApp is running in offline mode or not.
  * @constant {boolean}
  */
-export const isOffline = process.server
-  ? require('VersionUtil').getCurrentVersion() === require('VersionUtil').OFFLINE_VERSION
+export const isOffline = isServer
+  ? nativeRequire('VersionUtil').getCurrentVersion() === nativeRequire('VersionUtil').OFFLINE_VERSION
   : document.documentElement.classList.contains('sv-edit-mode');
 
 /**
@@ -51,12 +51,22 @@ export const isOnline = !isOffline;
 /**
  * Get a prefixed namespace unique for app.
  * @param {string} [prefix='app']
- * @return {String} - Prefixed namespace.
+ * @return {string} - Prefixed namespace.
  */
 export function getNamespace(prefix = 'app') {
   return `${prefix}_${appId}`;
 }
 
+/**
+ * Generate a unique identifier with a random UUID without dashes.
+ * @param {string} prefix Prefix for the identifier.
+ * @returns {string} Unique identifier.
+ */
+export function generateId(prefix = 'id') {
+  const uuid = isServer ? Packages.java.util.UUID.randomUUID() : window.crypto.randomUUID();
+  return `${prefix}_${uuid}`.replace(/-/g, '');
+}
+
 /**
  * Stringify an object to a query string compatible with Sitevision.
  * @param {Object} params Object with parameters to stringify.
@@ -147,15 +157,7 @@ export function getViewUri(route = '', params = undefined) {
  * @returns {string} URI for a resource.
  */
 export function getResourceUri(resource = '') {
-  let id;
-  let version;
-
-  if (process.server) {
-    ({ appIdentifier: id, appVersion: version } = require('appInfo'));
-  } else {
-    ({ webAppId: id, webAppVersion: version } = app);
-  }
-
+  const { webAppId: id, webAppVersion: version } = app;
   const path = resource.replace(leadingSlashes, '');
   return `/webapp-files/${id}/${version}/${path}`;
 }

package/common/legacy/getRouteUri.js

@@ -1,6 +1,7 @@
-/* eslint-disable global-require */
+import { nativeRequire } from '../../server';
+
 export default function getRouteUri(route) {
-  const PortletContextUtil = require('PortletContextUtil');
+  const PortletContextUtil = nativeRequire('PortletContextUtil');
   const currentPage = PortletContextUtil.getCurrentPage();
   const currentPortlet = PortletContextUtil.getCurrentPortlet();
   if (currentPage && currentPortlet) {

package/docs/1.svelte.md

@@ -1,11 +1,11 @@
-# Svelte
+---
+title: Svelte
+---
 
 Sitevision supports both server and client side rendering with Svelte.
 
 ## index.js
 
-For rendering a client side only app use the framework agnostic [client renderer](./1.render.md).
-
 ### `render(App, [props])`
 
 `@soleil-api/webapp-util/server/svelte`
@@ -13,20 +13,19 @@ For rendering a client side only app use the framework agnostic [client renderer
 Get a HTML string for rendering a universal Svelte application.
 If a client bundle is available the server rendered HTML will be hydrated and not completely re-rendered.
 
-**Returns**: <code>String</code> - HTML for rendering a Svelte application.
+**Returns**: `String` - HTML for rendering a Svelte application.
 
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| [App] | <code>Svelte</code> | | Svelte app to be rendered. |
-| [props] | <code>Object</code> | <code>{}</code> | Props that will be passed to the app. |
+| Param   | Type     | Default | Description                           |
+|---------|----------|---------|---------------------------------------|
+| [App]   | `Svelte` |         | Svelte app to be rendered.            |
+| [props] | `Object` | `{}`    | Props that will be passed to the app. |
 
 ### Universal
 
 Render an app with both server and client code.
 
-`index.js`
-
 ```javascript
+// index.js
 import router from '@sitevision/api/common/router';
 import { render } from '@soleil-api/webapp-util/server/svelte';
 
@@ -35,7 +34,7 @@ import App from './App.svelte';
 router.get('/', (req, res) => {
   const props = { foo: 'bar' };
   const html = render(App, props);
-  res.agnosticRender(html, props);  
+  res.agnosticRender(html, props);
 });
 ```
 
@@ -43,9 +42,8 @@ router.get('/', (req, res) => {
 
 Render an app with only server side code.
 
-`index.js`
-
-```javascript
+```js
+// index.js
 import router from '@sitevision/api/common/router';
 import { render } from '@soleil-api/webapp-util/server/svelte';
 
@@ -54,7 +52,7 @@ import App from './App.svelte';
 router.get('/', (req, res) => {
   const props = { foo: 'bar' };
   const html = render(App, props);
-  res.send(html);  
+  res.send(html);
 });
 ```
 
@@ -62,9 +60,8 @@ router.get('/', (req, res) => {
 
 Render an app with only client side code.
 
-`index.js`
-
 ```javascript
+// index.js
 import router from '@sitevision/api/common/router';
 
 router.get('/', (req, res) => {
@@ -81,19 +78,19 @@ router.get('/', (req, res) => {
 
 Renders a client side Svelte application.
 
-**Returns**: <code>\*</code> - Initialized Svelte component.
-
-| Param | Type | Default | Description |
-| --- | --- | --- | --- |
-| App | <code>\*</code> |  | Svelte app root component. |
-| [settings] | <code>Object</code> | <code>{}</code> | Settings object. |
-| [settings.target] | <code>Element</code> | | Target where app should be mounted. |
-| [settings.props] | <code>Object</code> | | Root component props. |
-| [settings.intro] | <code>String</code> | <code>false</code> | If true, will play transitions on initial render, rather than waiting for subsequent state changes. |
+**Returns**: `SvelteComponent` - Initialized Svelte component.
 
-`main.js`
+| Param              | Type              | Default                  | Description                                                                                                                                                                           |
+|--------------------|-------------------|--------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| App                | `SvelteComponent` |                          | Svelte app root component.                                                                                                                                                            |
+| [settings]         | `Object`          | `{}`                     | Settings object.                                                                                                                                                                      |
+| [settings.target]  | `Element`         |                          | Target where app should be mounted.                                                                                                                                                   |
+| [settings.props]   | `Object`          |                          | Root component props.                                                                                                                                                                 |
+| [settings.intro]   | `Boolean`         | `false`                  | If true, will play transitions on initial render, rather than waiting for subsequent state changes.                                                                                   |
+| [settings.hydrate] | `Boolean`         | `target.hasChildNodes()` | Instructs Svelte to upgrade existing DOM (usually from server-side rendering) rather than creating new elements. By default the app will hydrate when the target has any child nodes. |
 
 ```javascript
+// main.js
 import { render } from '@soleil-api/webapp-util/client/svelte';
 import App from './App.svelte';
 
@@ -103,9 +100,9 @@ export default (props, target) => {
 ```
 
 Mount the app in another element:
-`main.js`
 
 ```javascript
+// main.js
 import { render } from '@soleil-api/webapp-util/client/svelte';
 import App from './App.svelte';
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@soleil-se/app-util",
-  "version": "5.5.2",
+  "version": "5.6.1",
   "description": "Utility and rendering functions for WebApps.",
   "main": "./common/index.js",
   "author": "Soleil AB",
   "license": "UNLICENSED",
   "private": false,
-  "homepage": "https://docs.soleil.se/03.packages/01.@soleil-api&app-util/",
+  "homepage": "https://docs.soleil.se/build/sv-app-build/",
   "devDependencies": {
-    "@sitevision/api": "^1.0.10",
-    "svelte": "^3.44.1"
+    "@sitevision/api": "^2023.9.2",
+    "svelte": "^3.59.2"
   },
   "peerDependencies": {
     "@sitevision/api": "*"
   },
-  "gitHead": "e132d21089258c678eab7a8a3387edabe1f6534b",
+  "gitHead": "54e37b4e8586cfe3ceccd033b280aba9c4cb2463",
   "dependencies": {}
 }

package/server/index.js

@@ -0,0 +1,7 @@
+/* Make native requires work with @sitevision/sitevision-scripts that uses Webpack */
+/* eslint-disable camelcase, no-undef, import/no-dynamic-require, global-require */
+export function nativeRequire(module) {
+  if (typeof __non_webpack_require__ !== 'undefined') return __non_webpack_require__(module);
+  return require(module);
+}
+/* eslint-enable camelcase, no-undef, import/no-dynamic-require, global-require */