Skip to content

Commit 265924e

Browse files
heatblayzeheatblayze
authored
Bump spiff packages (#3)
* Bumping spiffcommerce packages * Create .prettierrc * Format files * Update App to use non deprecated SpiffCommerceClient functions
1 parent bfbd2ab commit 265924e

11 files changed

Lines changed: 173 additions & 178 deletions

File tree

‎.prettierrc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"semi": true,
3+
"trailingComma": "all",
4+
"singleQuote": true,
5+
"printWidth": 120,
6+
"tabWidth": 4,
7+
"useTabs": false
8+
}

‎index.html‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,15 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Spiff Commerce Quickstart</title>
7+
</head>
38

4-
<head>
5-
<meta charset="UTF-8" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Spiff Commerce Quickstart</title>
8-
</head>
9-
10-
<body>
11-
<div id="root"></div>
12-
<!-- The plugins.ts file corrects some missing imports. -->
13-
<script type="module" src="/src/plugins.ts"></script>
14-
<script type="module" src="/src/main.tsx"></script>
15-
</body>
16-
17-
</html>
9+
<body>
10+
<div id="root"></div>
11+
<!-- The plugins.ts file corrects some missing imports. -->
12+
<script type="module" src="/src/plugins.ts"></script>
13+
<script type="module" src="/src/main.tsx"></script>
14+
</body>
15+
</html>

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
"preview": "vite preview"
1010
},
1111
"dependencies": {
12-
"@spiffcommerce/core": "^0.10.253",
13-
"@spiffcommerce/preview": "^2.1.26",
12+
"@spiffcommerce/core": "^10.1.6",
13+
"@spiffcommerce/preview": "^2.1.46",
1414
"assert": "^2.0.0",
1515
"buffer": "^6.0.3",
1616
"https-browserify": "^1.0.0",

‎src/App.tsx‎

Lines changed: 61 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -6,82 +6,76 @@
66
* https://electronjs.org/docs/latest/tutorial/process-model
77
*
88
*/
9-
import "./index.css";
10-
import * as React from "react";
11-
import { useState } from "react";
12-
import { SpiffCommerceClient, WorkflowExperience } from "@spiffcommerce/core";
13-
import { SpiffCommerce3DPreviewService } from "@spiffcommerce/preview";
9+
import './index.css';
10+
import * as React from 'react';
11+
import { useState } from 'react';
12+
import { SpiffCommerceClient, WorkflowExperience } from '@spiffcommerce/core';
13+
import { SpiffCommerce3DPreviewService } from '@spiffcommerce/preview';
1414

15-
console.log(
16-
'👋 This message is being logged by "App.tsx"'
17-
);
15+
console.log('👋 This message is being logged by "App.tsx"');
1816

1917
/**
2018
* This is the main wrapper component for the App editor.
2119
* See app in src/index.tsx for usage.
2220
*/
2321
const App: React.FunctionComponent<{
24-
/**
25-
* The workflow to be used.
26-
*/
27-
workflowId: string;
28-
/**
29-
* The integration product associated to the workflow being run.
30-
*/
31-
integrationProductId: string;
22+
/**
23+
* The workflow to be used.
24+
*/
25+
workflowId: string;
26+
/**
27+
* The integration product associated to the workflow being run.
28+
*/
29+
integrationProductId: string;
3230
}> = ({ workflowId, integrationProductId }) => {
33-
const canvasRef = React.useRef<HTMLCanvasElement>(null);
34-
const [workflowExperience, setWorkflowExperience] = useState<
35-
WorkflowExperience | undefined
36-
>(undefined);
31+
const canvasRef = React.useRef<HTMLCanvasElement>(null);
32+
const [workflowExperience, setWorkflowExperience] = useState<WorkflowExperience | undefined>(undefined);
3733

38-
// This effect handles initialize of the workflow experience when the user first arrives at the page. Loading
39-
// saved designs will be handled within App seperately.
40-
React.useEffect(() => {
41-
if (!canvasRef.current) return;
42-
const init = async () => {
43-
const client = new SpiffCommerceClient({});
44-
await client.initFromIntegrationProduct(integrationProductId);
45-
const experience = await client.getWorkflowExperience(
46-
workflowId,
47-
undefined,
48-
(workflow) => {
49-
const canvas = document.createElement("canvas");
50-
return new SpiffCommerce3DPreviewService(
51-
canvas,
52-
workflow.globalPreviewConfig
53-
);
54-
}
55-
);
56-
experience
57-
.getWorkflowManager()
58-
.getPreviewService()
59-
.registerView(canvasRef.current);
60-
setWorkflowExperience(experience);
61-
};
62-
init().then(() => console.log("Workflow Experience Initialized"));
63-
// We only want this to run when the parameters passed in change. The workflow experience
64-
// changing internally due to saved designs etc.. Should not trigger this.
65-
// eslint-disable-next-line react-hooks/exhaustive-deps
66-
}, [canvasRef, integrationProductId, workflowId]);
34+
// This effect handles initialize of the workflow experience when the user first arrives at the page. Loading
35+
// saved designs will be handled within App seperately.
36+
React.useEffect(() => {
37+
if (!canvasRef.current) return;
38+
const init = async () => {
39+
const client = new SpiffCommerceClient({});
40+
await client.initFromIntegrationProduct(integrationProductId);
41+
const experience = await client.getWorkflowExperience(
42+
undefined,
43+
undefined,
44+
(workflow) => {
45+
return new SpiffCommerce3DPreviewService(workflow.globalPreviewConfig);
46+
},
47+
{
48+
type: 'integration',
49+
integrationProductId: integrationProductId,
50+
workflowId: workflowId,
51+
},
52+
);
53+
experience.getWorkflowManager().getPreviewService().registerView(canvasRef.current);
54+
setWorkflowExperience(experience);
55+
};
56+
init().then(() => console.log('Workflow Experience Initialized'));
57+
// We only want this to run when the parameters passed in change. The workflow experience
58+
// changing internally due to saved designs etc.. Should not trigger this.
59+
// eslint-disable-next-line react-hooks/exhaustive-deps
60+
}, [canvasRef, integrationProductId, workflowId]);
6761

68-
return (
69-
<div
70-
style={{
71-
width: "100%",
72-
height: "100%",
73-
overflow: "hidden",
74-
}}
75-
>
76-
<canvas
77-
id="3D-preview-canvas"
78-
ref={canvasRef}
79-
style={{ width: "100%", height: "100%", outline: "none" }}
80-
width="100%"
81-
height="100%"
82-
/>
83-
</div>
84-
);
62+
return (
63+
<div
64+
style={{
65+
width: '100%',
66+
height: '100%',
67+
overflow: 'hidden',
68+
}}
69+
>
70+
<canvas
71+
id="3D-preview-canvas"
72+
ref={canvasRef}
73+
style={{ width: '100%', height: '100%', outline: 'none' }}
74+
width="100%"
75+
height="100%"
76+
/>
77+
</div>
78+
);
8579
};
8680

87-
export default App;
81+
export default App;

‎src/index.css‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
html, head, body, #root {
1+
html,
2+
head,
3+
body,
4+
#root {
25
margin: 0;
36
width: 100%;
47
height: 100%;

‎src/main.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
1-
import React from "react";
2-
import ReactDOM from "react-dom/client";
3-
import App from "./App";
4-
import "./index.css";
1+
import React from 'react';
2+
import ReactDOM from 'react-dom/client';
3+
import App from './App';
4+
import './index.css';
55

6-
const integrationProduct = "5141150b-8419-4e24-ae3f-9cab47a7920f"; // Sample Serving Board
7-
const workflowID = "3b09df2b-8808-4b1c-955a-d4172e706d11"; // Sample Serving Board Workflow
6+
const integrationProduct = '5141150b-8419-4e24-ae3f-9cab47a7920f'; // Sample Serving Board
7+
const workflowID = '3b09df2b-8808-4b1c-955a-d4172e706d11'; // Sample Serving Board Workflow
88

9-
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
10-
<React.StrictMode>
11-
<App integrationProductId={integrationProduct} workflowId={workflowID} />
12-
</React.StrictMode>
9+
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
10+
<React.StrictMode>
11+
<App integrationProductId={integrationProduct} workflowId={workflowID} />
12+
</React.StrictMode>,
1313
);

‎src/plugins.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@ const process: any = {
55
(window as any).global = window;
66
(window as any).process = process;
77
(window as any).Buffer = (window as any).Buffer || Buffer;
8-
export default process;
8+
export default process;

‎tsconfig.json‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
{
2-
"compilerOptions": {
3-
"target": "ESNext",
4-
"useDefineForClassFields": true,
5-
"lib": ["DOM", "DOM.Iterable", "ESNext"],
6-
"allowJs": false,
7-
"skipLibCheck": true,
8-
"esModuleInterop": false,
9-
"allowSyntheticDefaultImports": true,
10-
"strict": true,
11-
"forceConsistentCasingInFileNames": true,
12-
"module": "ESNext",
13-
"moduleResolution": "Node",
14-
"resolveJsonModule": true,
15-
"isolatedModules": true,
16-
"noEmit": true,
17-
"jsx": "react-jsx"
18-
},
19-
"include": ["src"],
20-
"references": [{ "path": "./tsconfig.node.json" }]
2+
"compilerOptions": {
3+
"target": "ESNext",
4+
"useDefineForClassFields": true,
5+
"lib": ["DOM", "DOM.Iterable", "ESNext"],
6+
"allowJs": false,
7+
"skipLibCheck": true,
8+
"esModuleInterop": false,
9+
"allowSyntheticDefaultImports": true,
10+
"strict": true,
11+
"forceConsistentCasingInFileNames": true,
12+
"module": "ESNext",
13+
"moduleResolution": "Node",
14+
"resolveJsonModule": true,
15+
"isolatedModules": true,
16+
"noEmit": true,
17+
"jsx": "react-jsx"
18+
},
19+
"include": ["src"],
20+
"references": [{ "path": "./tsconfig.node.json" }]
2121
}

‎tsconfig.node.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
{
2-
"compilerOptions": {
3-
"composite": true,
4-
"module": "ESNext",
5-
"moduleResolution": "Node",
6-
"allowSyntheticDefaultImports": true
7-
},
8-
"include": ["vite.config.ts"]
2+
"compilerOptions": {
3+
"composite": true,
4+
"module": "ESNext",
5+
"moduleResolution": "Node",
6+
"allowSyntheticDefaultImports": true
7+
},
8+
"include": ["vite.config.ts"]
99
}

‎vite.config.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@ import path from 'path';
44

55
// https://vitejs.dev/config/
66
export default defineConfig({
7-
plugins: [react()],
8-
resolve: {
9-
alias: {
10-
'https': path.resolve(__dirname, './node_modules/https-browserify/index.js'),
11-
'util': path.resolve(__dirname, './node_modules/util/util.js'),
12-
'assert': path.resolve(__dirname, './node_modules/assert/build/assert.js'),
13-
'path': path.resolve(__dirname, './node_modules/path-browserify/index.js'),
14-
'url': path.resolve(__dirname, './node_modules/url/url.js'),
15-
'http': path.resolve(__dirname, './node_modules/stream-http/index.js'),
16-
}
17-
}
18-
})
7+
plugins: [react()],
8+
resolve: {
9+
alias: {
10+
https: path.resolve(__dirname, './node_modules/https-browserify/index.js'),
11+
util: path.resolve(__dirname, './node_modules/util/util.js'),
12+
assert: path.resolve(__dirname, './node_modules/assert/build/assert.js'),
13+
path: path.resolve(__dirname, './node_modules/path-browserify/index.js'),
14+
url: path.resolve(__dirname, './node_modules/url/url.js'),
15+
http: path.resolve(__dirname, './node_modules/stream-http/index.js'),
16+
},
17+
},
18+
});

0 commit comments

Comments
 (0)