npm - @tduniec/plugin-template-designer - Versions diffs - 0.2.2 → 0.2.3 - Mend

@tduniec/plugin-template-designer 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/dist/components/TemplateDesigner/components/TemplateWorkspace.esm.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
+import { useRef, useMemo, useCallback, useEffect } from 'react';
 import { Grid, Typography, Button, Paper } from '@material-ui/core';
 import { useTheme } from '@material-ui/core/styles';
 import CodeMirror from '@uiw/react-codemirror';
@@ -30,11 +30,53 @@ const TemplateWorkspace = ({
 }) => {
   const theme = useTheme();
   const paletteMode = theme.palette.mode ?? theme.palette.type ?? "light";
+  const yamlDraftRef = useRef(templateYaml);
+  const templateYamlRef = useRef(templateYaml);
+  const debounceRef = useRef(null);
   const yamlExtensions = useMemo(() => [yaml()], []);
   const codeMirrorTheme = useMemo(
     () => paletteMode === "dark" ? "dark" : "light",
     [paletteMode]
   );
+  const flushYamlDraft = useCallback(() => {
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+      debounceRef.current = null;
+    }
+    if (yamlDraftRef.current !== templateYamlRef.current) {
+      onYamlChange(yamlDraftRef.current);
+    }
+  }, [onYamlChange]);
+  const handleYamlChange = useCallback(
+    (value) => {
+      yamlDraftRef.current = value;
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+      debounceRef.current = setTimeout(() => {
+        if (yamlDraftRef.current !== templateYamlRef.current) {
+          onYamlChange(yamlDraftRef.current);
+        }
+        debounceRef.current = null;
+      }, 600);
+    },
+    [onYamlChange]
+  );
+  const handleYamlBlur = useCallback(() => {
+    flushYamlDraft();
+  }, [flushYamlDraft]);
+  useEffect(() => {
+    yamlDraftRef.current = templateYaml;
+    templateYamlRef.current = templateYaml;
+  }, [templateYaml]);
+  useEffect(
+    () => () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    },
+    []
+  );
   return /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, direction: "column", children: /* @__PURE__ */ jsx(Grid, { item: true, style: { height: 800 }, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -182,7 +224,8 @@ const TemplateWorkspace = ({
                         extensions: yamlExtensions,
                         theme: codeMirrorTheme,
                         height: "100%",
-                        onChange: (value) => onYamlChange(value)
+                        onChange: handleYamlChange,
+                        onBlur: handleYamlBlur
                       }
                     ) })
                   ]

package/dist/components/TemplateDesigner/components/TemplateWorkspace.esm.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TemplateWorkspace.esm.js","sources":["../../../../src/components/TemplateDesigner/components/TemplateWorkspace.tsx"],"sourcesContent":["import { useMemo } from \"react\";\nimport { Button, Grid, Paper, Typography } from \"@material-ui/core\";\nimport { useTheme } from \"@material-ui/core/styles\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport { yaml } from \"@codemirror/lang-yaml\";\nimport type {\n ScaffolderTaskOutput,\n TaskStep,\n} from \"@backstage/plugin-scaffolder-common\";\nimport type { TemplateParametersValue } from \"../../Nodes/types\";\nimport App from \"../../DesignerFlow/DesignerFlow\";\n\ntype TemplateWorkspaceProps = {\n templateSteps: TaskStep[];\n templateParameters: TemplateParametersValue;\n templateOutput?: ScaffolderTaskOutput;\n templateYaml: string;\n yamlError?: string;\n loadError?: string;\n showYaml: boolean;\n onToggleYaml: () => void;\n onYamlChange: (value: string) => void;\n onStepsChange: (steps: TaskStep[]) => void;\n onParametersChange: (parameters: TemplateParametersValue) => void;\n onOutputChange: (output?: ScaffolderTaskOutput) => void;\n onReload: () => void;\n onSave: () => void;\n onOpenTemplatePicker: () => void;\n activeTemplateLabel?: string;\n reloadButtonLabel: string;\n saveButtonLabel: string;\n isReloading: boolean;\n isSaving: boolean;\n};\n\nexport const TemplateWorkspace = ({\n templateSteps,\n templateParameters,\n templateOutput,\n templateYaml,\n yamlError,\n loadError,\n showYaml,\n onToggleYaml,\n onYamlChange,\n onStepsChange,\n onParametersChange,\n onOutputChange,\n onReload,\n onSave,\n onOpenTemplatePicker,\n activeTemplateLabel,\n reloadButtonLabel,\n saveButtonLabel,\n isReloading,\n isSaving,\n}: TemplateWorkspaceProps) => {\n const theme = useTheme();\n const paletteMode =\n (theme.palette as { mode?: \"light\" \| \"dark\" }).mode ??\n theme.palette.type ??\n \"light\";\n const yamlExtensions = useMemo(() => [yaml()], []);\n const codeMirrorTheme = useMemo(\n () => (paletteMode === \"dark\" ? \"dark\" : \"light\"),\n [paletteMode]\n );\n\n return (\n <Grid container spacing={3} direction=\"column\">\n <Grid item style={{ height: 800 }}>\n <div\n style={{\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: 16,\n }}\n >\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n flexWrap: \"wrap\",\n gap: 12,\n }}\n >\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: 12,\n flexWrap: \"wrap\",\n }}\n >\n {activeTemplateLabel && (\n <Typography variant=\"body2\" color=\"textSecondary\">\n Active template: {activeTemplateLabel}\n </Typography>\n )}\n <Button\n color=\"primary\"\n variant=\"contained\"\n size=\"small\"\n onClick={onReload}\n disabled={isReloading}\n >\n {reloadButtonLabel}\n </Button>\n <Button\n color=\"primary\"\n variant=\"outlined\"\n size=\"small\"\n onClick={onSave}\n disabled={isSaving}\n >\n {saveButtonLabel}\n </Button>\n <Button\n color=\"primary\"\n variant=\"outlined\"\n size=\"small\"\n onClick={onOpenTemplatePicker}\n >\n Load different file\n </Button>\n </div>\n <Button variant=\"outlined\" size=\"small\" onClick={onToggleYaml}>\n {showYaml ? \"Hide YAML\" : \"Show YAML\"}\n </Button>\n </div>\n {loadError && (\n <Typography\n variant=\"body2\"\n style={{ color: theme.palette.error.main }}\n >\n {loadError}\n </Typography>\n )}\n <div\n style={{\n flex: 1,\n display: \"flex\",\n gap: 16,\n minHeight: 0,\n }}\n >\n <div style={{ flex: showYaml ? 1.6 : 1, minWidth: 0 }}>\n <div style={{ height: \"100%\" }}>\n <App\n steps={templateSteps}\n parameters={templateParameters}\n output={templateOutput}\n onStepsChange={onStepsChange}\n onParametersChange={onParametersChange}\n onOutputChange={onOutputChange}\n />\n </div>\n </div>\n {showYaml && (\n <Paper\n elevation={2}\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: \"column\",\n minWidth: 0,\n overflow: \"hidden\",\n }}\n >\n <div\n style={{\n padding: \"12px 16px\",\n borderBottom: \"1px solid rgba(0,0,0,0.12)\",\n fontWeight: 600,\n fontSize: \"0.875rem\",\n }}\n >\n YAML Preview\n </div>\n {yamlError && (\n <div\n style={{\n padding: \"8px 16px\",\n borderBottom: \"1px solid rgba(0,0,0,0.08)\",\n color: theme.palette.error.main,\n fontSize: \"0.75rem\",\n background:\n paletteMode === \"dark\"\n ? \"rgba(255, 82, 82, 0.1)\"\n : \"rgba(244, 67, 54, 0.08)\",\n }}\n >\n {yamlError}\n </div>\n )}\n <div style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n <CodeMirror\n value={templateYaml}\n extensions={yamlExtensions}\n theme={codeMirrorTheme}\n height=\"100%\"\n onChange={(value) => onYamlChange(value)}\n />\n </div>\n </Paper>\n )}\n </div>\n </div>\n </Grid>\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"TemplateWorkspace.esm.js","sources":["../../../../src/components/TemplateDesigner/components/TemplateWorkspace.tsx"],"sourcesContent":["import { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { Button, Grid, Paper, Typography } from \"@material-ui/core\";\nimport { useTheme } from \"@material-ui/core/styles\";\nimport CodeMirror from \"@uiw/react-codemirror\";\nimport { yaml } from \"@codemirror/lang-yaml\";\nimport type {\n ScaffolderTaskOutput,\n TaskStep,\n} from \"@backstage/plugin-scaffolder-common\";\nimport type { TemplateParametersValue } from \"../../Nodes/types\";\nimport App from \"../../DesignerFlow/DesignerFlow\";\n\ntype TemplateWorkspaceProps = {\n templateSteps: TaskStep[];\n templateParameters: TemplateParametersValue;\n templateOutput?: ScaffolderTaskOutput;\n templateYaml: string;\n yamlError?: string;\n loadError?: string;\n showYaml: boolean;\n onToggleYaml: () => void;\n onYamlChange: (value: string) => void;\n onStepsChange: (steps: TaskStep[]) => void;\n onParametersChange: (parameters: TemplateParametersValue) => void;\n onOutputChange: (output?: ScaffolderTaskOutput) => void;\n onReload: () => void;\n onSave: () => void;\n onOpenTemplatePicker: () => void;\n activeTemplateLabel?: string;\n reloadButtonLabel: string;\n saveButtonLabel: string;\n isReloading: boolean;\n isSaving: boolean;\n};\n\nexport const TemplateWorkspace = ({\n templateSteps,\n templateParameters,\n templateOutput,\n templateYaml,\n yamlError,\n loadError,\n showYaml,\n onToggleYaml,\n onYamlChange,\n onStepsChange,\n onParametersChange,\n onOutputChange,\n onReload,\n onSave,\n onOpenTemplatePicker,\n activeTemplateLabel,\n reloadButtonLabel,\n saveButtonLabel,\n isReloading,\n isSaving,\n}: TemplateWorkspaceProps) => {\n const theme = useTheme();\n const paletteMode =\n (theme.palette as { mode?: \"light\" \| \"dark\" }).mode ??\n theme.palette.type ??\n \"light\";\n const yamlDraftRef = useRef(templateYaml);\n const templateYamlRef = useRef(templateYaml);\n const debounceRef = useRef<ReturnType<typeof setTimeout> \| null>(null);\n const yamlExtensions = useMemo(() => [yaml()], []);\n const codeMirrorTheme = useMemo(\n () => (paletteMode === \"dark\" ? \"dark\" : \"light\"),\n [paletteMode]\n );\n\n // implementation releated to yaml rendering -> onBlue and onDebounce\n const flushYamlDraft = useCallback(() => {\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n debounceRef.current = null;\n }\n if (yamlDraftRef.current !== templateYamlRef.current) {\n onYamlChange(yamlDraftRef.current);\n }\n }, [onYamlChange]);\n const handleYamlChange = useCallback(\n (value: string) => {\n yamlDraftRef.current = value;\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n debounceRef.current = setTimeout(() => {\n if (yamlDraftRef.current !== templateYamlRef.current) {\n onYamlChange(yamlDraftRef.current);\n }\n debounceRef.current = null;\n }, 600);\n },\n [onYamlChange]\n );\n const handleYamlBlur = useCallback(() => {\n flushYamlDraft();\n }, [flushYamlDraft]);\n\n useEffect(() => {\n yamlDraftRef.current = templateYaml;\n templateYamlRef.current = templateYaml;\n }, [templateYaml]);\n useEffect(\n () => () => {\n if (debounceRef.current) {\n clearTimeout(debounceRef.current);\n }\n },\n []\n );\n\n return (\n <Grid container spacing={3} direction=\"column\">\n <Grid item style={{ height: 800 }}>\n <div\n style={{\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: 16,\n }}\n >\n <div\n style={{\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n flexWrap: \"wrap\",\n gap: 12,\n }}\n >\n <div\n style={{\n display: \"flex\",\n alignItems: \"center\",\n gap: 12,\n flexWrap: \"wrap\",\n }}\n >\n {activeTemplateLabel && (\n <Typography variant=\"body2\" color=\"textSecondary\">\n Active template: {activeTemplateLabel}\n </Typography>\n )}\n <Button\n color=\"primary\"\n variant=\"contained\"\n size=\"small\"\n onClick={onReload}\n disabled={isReloading}\n >\n {reloadButtonLabel}\n </Button>\n <Button\n color=\"primary\"\n variant=\"outlined\"\n size=\"small\"\n onClick={onSave}\n disabled={isSaving}\n >\n {saveButtonLabel}\n </Button>\n <Button\n color=\"primary\"\n variant=\"outlined\"\n size=\"small\"\n onClick={onOpenTemplatePicker}\n >\n Load different file\n </Button>\n </div>\n <Button variant=\"outlined\" size=\"small\" onClick={onToggleYaml}>\n {showYaml ? \"Hide YAML\" : \"Show YAML\"}\n </Button>\n </div>\n {loadError && (\n <Typography\n variant=\"body2\"\n style={{ color: theme.palette.error.main }}\n >\n {loadError}\n </Typography>\n )}\n <div\n style={{\n flex: 1,\n display: \"flex\",\n gap: 16,\n minHeight: 0,\n }}\n >\n <div style={{ flex: showYaml ? 1.6 : 1, minWidth: 0 }}>\n <div style={{ height: \"100%\" }}>\n <App\n steps={templateSteps}\n parameters={templateParameters}\n output={templateOutput}\n onStepsChange={onStepsChange}\n onParametersChange={onParametersChange}\n onOutputChange={onOutputChange}\n />\n </div>\n </div>\n {showYaml && (\n <Paper\n elevation={2}\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: \"column\",\n minWidth: 0,\n overflow: \"hidden\",\n }}\n >\n <div\n style={{\n padding: \"12px 16px\",\n borderBottom: \"1px solid rgba(0,0,0,0.12)\",\n fontWeight: 600,\n fontSize: \"0.875rem\",\n }}\n >\n YAML Preview\n </div>\n {yamlError && (\n <div\n style={{\n padding: \"8px 16px\",\n borderBottom: \"1px solid rgba(0,0,0,0.08)\",\n color: theme.palette.error.main,\n fontSize: \"0.75rem\",\n background:\n paletteMode === \"dark\"\n ? \"rgba(255, 82, 82, 0.1)\"\n : \"rgba(244, 67, 54, 0.08)\",\n }}\n >\n {yamlError}\n </div>\n )}\n <div style={{ flex: 1, minHeight: 0, overflow: \"auto\" }}>\n <CodeMirror\n value={templateYaml}\n extensions={yamlExtensions}\n theme={codeMirrorTheme}\n height=\"100%\"\n onChange={handleYamlChange}\n onBlur={handleYamlBlur}\n />\n </div>\n </Paper>\n )}\n </div>\n </div>\n </Grid>\n </Grid>\n );\n};\n"],"names":[],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@tduniec/plugin-template-designer",
   "description": "Template Designer turns blank Backstage YAML into a storyboard-like canvas, guiding anyone through drag-and-drop scaffolder authoring before ever touching code. Rally non-experts, broadcast best practices, and accelerate template launches directly inside Backstage.",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "license": "Apache-2.0",
   "keywords": [
     "backstage",