Skip to content

Commit c48cf54

Browse files
petschkithet
petschki
authored and
thet
committed
feat(pat contentbrowser): Upgrade to Svelte 5 with runes support.
1 parent 7d08c06 commit c48cf54

11 files changed

Lines changed: 142 additions & 144 deletions

‎jest.config.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const config = require("@patternslib/dev/jest.config.js");
44
// config.setupFilesAfterEnv.push("./node_modules/@testing-library/jest-dom/extend-expect");
55
config.setupFilesAfterEnv.push(path.resolve(__dirname, "./src/setup-tests.js"));
66
config.transformIgnorePatterns = [
7-
"/node_modules/(?!@patternslib/)(?!@plone/)(?!preact/)(?!screenfull/)(?!sinon/)(?!bootstrap/)(?!datatable/)(?!svelte/).+\\.[t|j]sx?$",
7+
"/node_modules/(?!@patternslib/)(?!@plone/)(?!preact/)(?!screenfull/)(?!sinon/)(?!bootstrap/)(?!datatable/)(?!svelte/)(?!esm-env/).+\\.[t|j]sx?$",
88
];
99

1010
// add svelte-jester

‎package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
"@11ty/eleventy-upgrade-help": "3.0.2",
1313
"@patternslib/pat-code-editor": "4.0.1",
1414
"@patternslib/patternslib": "9.10.4",
15-
"@plone/registry": "^2.5.4",
15+
"@plone/registry": "^2.7.0",
1616
"backbone": "1.6.1",
1717
"backbone.paginator": "2.0.8",
1818
"bootstrap": "5.3.8",
@@ -55,9 +55,9 @@
5555
"npm-run-all2": "^8.0.4",
5656
"rimraf": "^6.0.1",
5757
"sinon": "^16.1.3",
58-
"svelte": "^4.2.19",
59-
"svelte-jester": "^3.0.0",
60-
"svelte-loader": "^3.2.3",
58+
"svelte": "^5.53.8",
59+
"svelte-jester": "^5.0.0",
60+
"svelte-loader": "^3.2.4",
6161
"svelte-scrollto": "^0.2.0",
6262
"svg-inline-loader": "^0.8.2"
6363
},

‎src/pat/contentbrowser/contentbrowser.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import Parser from "@patternslib/patternslib/src/core/parser";
33
import registry from "@patternslib/patternslib/src/core/registry";
44
import utils from "../../core/utils";
55
import plone_registry from "@plone/registry";
6+
import { mount } from "svelte";
67

78
// Contentbrowser pattern
89

@@ -80,7 +81,7 @@ class Pattern extends BasePattern {
8081
contentBrowserEl.classList.add("content-browser-wrapper");
8182
this.el.parentNode.insertBefore(contentBrowserEl, this.el);
8283

83-
this.component_content_browser = new ContentBrowserApp({
84+
this.component_content_browser = mount(ContentBrowserApp, {
8485
target: contentBrowserEl,
8586
props: {
8687
fieldId: nodeId,

‎src/pat/contentbrowser/src/App.svelte‎

Lines changed: 49 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<script>
22
import logger from "@patternslib/patternslib/src/core/logging";
33
import { getContext } from "svelte";
4+
import { get } from "svelte/store";
45
import ContentBrowser from "./ContentBrowser.svelte";
56
import SelectedItems from "./SelectedItems.svelte";
67
import {
@@ -13,35 +14,41 @@
1314
setShowContentBrowser,
1415
} from "./stores";
1516
16-
export let maxDepth;
17-
export let width;
18-
export let attributes;
19-
export let contextPath;
20-
export let vocabularyUrl;
21-
export let mode = "browse";
22-
export let layout = "list";
23-
export let rootPath = "";
24-
export let rootUrl = "";
25-
export let basePath = "";
26-
export let selectableTypes = [];
27-
export let browseableTypes = [];
28-
export let searchIndex = "SearchableText";
29-
export let maximumSelectionSize = -1;
30-
export let separator;
31-
export let selection = [];
32-
export let query = {};
33-
export let fieldId;
34-
export let upload;
35-
export let uploadAddImmediately = true;
36-
export let uploadAcceptedMimetypes;
37-
export let favorites;
38-
export let recentlyUsed;
39-
export let recentlyUsedKey;
40-
export let recentlyUsedMaxItems;
41-
export let bSize = 20;
42-
export let sortOn = "sortable_title";
43-
export let sortOrder = "ascending";
44-
export let componentRegistryKeys = {};
17+
let {
18+
maxDepth,
19+
width,
20+
attributes,
21+
contextPath: contextPathProp,
22+
vocabularyUrl,
23+
mode = "browse",
24+
layout = "list",
25+
rootPath: rootPathProp = "",
26+
rootUrl = "",
27+
basePath = "",
28+
selectableTypes = [],
29+
browseableTypes = [],
30+
searchIndex = "SearchableText",
31+
maximumSelectionSize = -1,
32+
separator,
33+
selection = [],
34+
query = {},
35+
fieldId,
36+
upload,
37+
uploadAddImmediately = true,
38+
uploadAcceptedMimetypes,
39+
favorites,
40+
recentlyUsed,
41+
recentlyUsedKey,
42+
recentlyUsedMaxItems,
43+
bSize = 20,
44+
sortOn = "sortable_title",
45+
sortOrder = "ascending",
46+
componentRegistryKeys = {},
47+
} = $props();
48+
49+
// Local mutable copies of the two props that may be reassigned locally
50+
let rootPath = $state(rootPathProp);
51+
let contextPath = $state(contextPathProp);
4552
4653
const log = logger.getLogger("pat-contentbrowser");
4754
@@ -57,30 +64,32 @@
5764
// initially set current path
5865
const currentPath = getContext("currentPath");
5966
60-
if (!$currentPath) {
67+
if (!get(currentPath)) {
68+
let initialPath = "";
6169
if (basePath || rootPath) {
6270
// if root path is not above base path we start at rootPath
63-
$currentPath = basePath.indexOf(rootPath) != 0 ? rootPath : basePath;
71+
initialPath = basePath.indexOf(rootPath) != 0 ? rootPath : basePath;
6472
if (
6573
rootPath &&
66-
$currentPath != rootPath &&
67-
$currentPath.indexOf(rootPath) == 0
74+
initialPath != rootPath &&
75+
initialPath.indexOf(rootPath) == 0
6876
) {
6977
// remove rootPath from $currentPath
70-
$currentPath = $currentPath.replace(rootPath, "");
78+
initialPath = initialPath.replace(rootPath, "");
7179
}
7280
} else {
7381
// no path available. try to determine path from vocabularyUrl
7482
const vocabPath = new URL(vocabularyUrl).pathname.split("/");
75-
rootPath =
83+
initialPath =
84+
rootPath =
7685
contextPath =
77-
$currentPath =
7886
vocabPath.slice(0, vocabPath.length - 1).join("/") || "/";
7987
}
88+
currentPath.set(initialPath);
8089
}
8190
82-
let config = getContext("config");
83-
$config = {
91+
const config = getContext("config");
92+
config.set({
8493
mode: mode,
8594
layout: layout,
8695
attributes: attributes,
@@ -110,9 +119,9 @@
110119
sortOn: sortOn,
111120
sortOrder: sortOrder,
112121
componentRegistryKeys: componentRegistryKeys,
113-
};
122+
});
114123
115-
log.debug(`Initialized App<${fieldId}> with config`, $config);
124+
log.debug(`Initialized App<${fieldId}> with config`, config);
116125
</script>
117126

118127
<ContentBrowser />

0 commit comments

Comments
 (0)