Skip to content

Commit 0d5a50b

Browse files
heatblayzeheatblayze
authored
Initial vite template (#1)
* Initial Vite template application. * Update README.md * Updated comment
1 parent 5f3e499 commit 0d5a50b

13 files changed

Lines changed: 2154 additions & 1 deletion

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,16 @@
1-
# browser-quickstart
1+
# README #
2+
3+
This repository contains a pristine boilerplate with recommended settings for a new browser application. It is intended to
4+
be forked and used as a starting point for new applications. Any tweaks to configuration can then be pulled from upstream if required.
5+
6+
This template uses Vite to manage building and configuring the application. You can read more about Vite here: https://vitejs.dev/guide/
7+
8+
### How do I get set up? ###
9+
10+
* Fork the repository
11+
* Run 'yarn dev' to run the project in your new repo.
12+
* From that point on you may build out the application you need.
13+
14+
### Contribution guidelines ###
15+
16+
* Ensure any changes are very targeted and do not affect the boilerplate too much. (Consider the impact on other projects that may be using this boilerplate.)

‎index.html‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
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>

‎package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "browser-quickstart",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "tsc && vite build",
9+
"preview": "vite preview"
10+
},
11+
"dependencies": {
12+
"@spiffcommerce/core": "^0.10.253",
13+
"@spiffcommerce/preview": "^2.1.26",
14+
"assert": "^2.0.0",
15+
"buffer": "^6.0.3",
16+
"https-browserify": "^1.0.0",
17+
"path-browserify": "^1.0.1",
18+
"react": "^18.2.0",
19+
"react-dom": "^18.2.0",
20+
"stream-http": "^3.2.0",
21+
"url": "^0.11.0",
22+
"util": "^0.12.5"
23+
},
24+
"devDependencies": {
25+
"@types/node": "^18.15.11",
26+
"@types/react": "^18.0.28",
27+
"@types/react-dom": "^18.0.11",
28+
"@vitejs/plugin-react": "^3.1.0",
29+
"typescript": "^4.9.3",
30+
"vite": "^4.2.0"
31+
}
32+
}

‎src/App.tsx‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/**
2+
* This file will automatically be loaded by webpack and run in the "renderer" context.
3+
* To learn more about the differences between the "main" and the "renderer" context in
4+
* Electron, visit:
5+
*
6+
* https://electronjs.org/docs/latest/tutorial/process-model
7+
*
8+
*/
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";
14+
15+
console.log(
16+
'👋 This message is being logged by "App.tsx"'
17+
);
18+
19+
/**
20+
* This is the main wrapper component for the App editor.
21+
* See app in src/index.tsx for usage.
22+
*/
23+
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;
32+
}> = ({ workflowId, integrationProductId }) => {
33+
const canvasRef = React.useRef<HTMLCanvasElement>(null);
34+
const [workflowExperience, setWorkflowExperience] = useState<
35+
WorkflowExperience | undefined
36+
>(undefined);
37+
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]);
67+
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+
);
85+
};
86+
87+
export default App;

‎src/index.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
html, head, body, #root {
2+
margin: 0;
3+
width: 100%;
4+
height: 100%;
5+
}

‎src/main.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import ReactDOM from "react-dom/client";
3+
import App from "./App";
4+
import "./index.css";
5+
6+
const integrationProduct = "5141150b-8419-4e24-ae3f-9cab47a7920f"; // Sample Serving Board
7+
const workflowID = "3b09df2b-8808-4b1c-955a-d4172e706d11"; // Sample Serving Board Workflow
8+
9+
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
10+
<React.StrictMode>
11+
<App integrationProductId={integrationProduct} workflowId={workflowID} />
12+
</React.StrictMode>
13+
);

‎src/plugins.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Buffer } from 'buffer';
2+
const process: any = {
3+
env: import.meta.env,
4+
};
5+
(window as any).global = window;
6+
(window as any).process = process;
7+
(window as any).Buffer = (window as any).Buffer || Buffer;
8+
export default process;

‎src/vite-env.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/// <reference types="vite/client" />

‎tsconfig.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
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" }]
21+
}

0 commit comments

Comments
 (0)