jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Migrating to Vite (#287)

Browse source
This commit is contained in:
Gabriel Luiz Freitas Almeida 2023-05-13 11:34:42 +00:00 • committed by GitHub
commit 061743abd0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
21 changed files with 1427 additions and 13805 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/frontend/public/index.html → src/frontend/index.html
View file

@ -4,12 +4,12 @@
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="/favicon.ico" />
<title>LangFlow</title>
</head>
<body id='body' style="width: 100%; height:100%">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div style="width: 100vw; height:100vh" id='root'>
</div>
<div style="width: 100vw; height:100vh" id='root'></div>
<script type="module" src="/src/index.tsx"></script>
</body>
</html>

15106
src/frontend/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

36
src/frontend/package.json
View file

@ -11,13 +11,6 @@
"@tabler/icons-react": "^2.18.0",
"@tailwindcss/forms": "^0.5.3",
"@tailwindcss/line-clamp": "^0.4.4",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.12",
"@types/react": "^18.0.27",
"@types/react-dom": "^18.0.10",
"ace-builds": "^1.16.0",
"ansi-to-html": "^0.7.2",
"axios": "^1.3.2",
@ -32,23 +25,19 @@
"react-laag": "^2.0.5",
"react-markdown": "^8.0.7",
"react-router-dom": "^6.8.1",
"react-scripts": "5.0.1",
"react-syntax-highlighter": "^15.5.0",
"react-syntax-highlighter": "^15.5.0",
"react-tabs": "^6.0.0",
"reactflow": "^11.5.5",
"rehype-mathjax": "^4.0.2",
"remark-gfm": "^3.0.1",
"remark-math": "^5.1.1",
"tailwindcss": "^3.2.6",
"typescript": "^4.9.5",
"uuid": "^9.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
"start": "vite",
"build": "vite build",
"serve": "vite preview"
},
"eslintConfig": {
"extends": [
@ -70,6 +59,21 @@
},
"proxy": "http://127.0.0.1:7860",
"devDependencies": {
"@tailwindcss/typography": "^0.5.9"
"@tailwindcss/typography": "^0.5.9",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/lodash": "^4.14.194",
"@types/node": "^16.18.12",
"@types/react": "^18.0.28",
"@types/react-dom": "^18.0.11",
"@types/uuid": "^9.0.1",
"@vitejs/plugin-react-swc": "^3.0.0",
"autoprefixer": "^10.4.14",
"postcss": "^8.4.23",
"tailwindcss": "^3.3.2",
"typescript": "^5.0.2",
"vite": "^4.3.5"
}
}

6
src/frontend/postcss.config.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

3
src/frontend/src/App.tsx
View file

@ -2,6 +2,8 @@ import "reactflow/dist/style.css";
import { useState, useEffect, useContext } from "react";
import "./App.css";
import { useLocation } from "react-router-dom";
import _ from "lodash";
import ErrorAlert from "./alerts/error";
import NoticeAlert from "./alerts/notice";
import SuccessAlert from "./alerts/success";
@ -14,7 +16,6 @@ import CrashErrorComponent from "./components/CrashErrorComponent";
import { TabsContext } from "./contexts/tabsContext";
export default function App() {
var _ = require("lodash");
let { setCurrent, setShowSideBar, setIsStackedOpen } =
useContext(locationContext);

4
src/frontend/src/components/chatComponent/chatMessage/index.tsx
View file

@ -6,8 +6,8 @@ import {
import { useState } from "react";
import { ChatMessageType } from "../../../types/chat";
import { nodeColors } from "../../../utils";
var Convert = require("ansi-to-html");
var convert = new Convert({ newline: true });
import Convert from "ansi-to-html";
var convert = new Convert({newline:true});
export default function ChatMessage({ chat }: { chat: ChatMessageType }) {
const [hidden, setHidden] = useState(true);

2
src/frontend/src/components/chatComponent/index.tsx
View file

@ -4,7 +4,7 @@ import { ChatMessageType, ChatType } from "../../types/chat";
import ChatTrigger from "./chatTrigger";
import ChatModal from "../../modals/chatModal";
const _ = require("lodash");
import _ from "lodash";
export default function Chat({ flow }: ChatType) {
const [open, setOpen] = useState(false);

2
src/frontend/src/components/inputListComponent/index.tsx
View file

@ -3,7 +3,7 @@ import { useContext, useEffect, useState } from "react";
import { InputListComponentType } from "../../types/components";
import { TabsContext } from "../../contexts/tabsContext";
var _ = require("lodash");
import _ from "lodash";
export default function InputListComponent({
value,

2
src/frontend/src/contexts/alertContext.tsx
View file

@ -1,7 +1,7 @@
import { createContext, ReactNode, useState } from "react";
import { AlertItemType } from "../types/alerts";
var _ = require("lodash");
import _ from "lodash";
//types for alertContextType
type alertContextType = {

2
src/frontend/src/contexts/tabsContext.tsx
View file

@ -12,7 +12,7 @@ import { normalCaseToSnakeCase, updateObject, updateTemplate } from "../utils";
import { alertContext } from "./alertContext";
import { typesContext } from "./typesContext";
import { APITemplateType, TemplateVariableType } from "../types/api";
const { v4: uuidv4 } = require("uuid");
import { v4 as uuidv4 } from "uuid";
const TabsContextInitialValue: TabsContextType = {
save: () => {},

4
src/frontend/src/index.css
View file

@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",

2
src/frontend/src/index.tsx
View file

@ -5,6 +5,8 @@ import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";
import ContextWrapper from "./contexts";
import './index.css';
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);

2
src/frontend/src/modals/ApiModal/index.tsx
View file

@ -7,7 +7,7 @@ import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/webpack-resolver";
// import "ace-builds/webpack-resolver";
import { darkContext } from "../../contexts/darkContext";
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';

3
src/frontend/src/modals/chatModal/chatMessage/index.tsx
View file

@ -11,8 +11,7 @@ import rehypeMathjax from "rehype-mathjax";
import remarkGfm from "remark-gfm";
import remarkMath from "remark-math";
import { CodeBlock } from "./codeBlock";
var Convert = require("ansi-to-html");
var convert = new Convert({ newline: true });
import Convert from "ansi-to-html";
export default function ChatMessage({ chat, lockChat }: { chat: ChatMessageType, lockChat: boolean }) {
const [message, setMessage] = useState("");

3
src/frontend/src/modals/chatModal/index.tsx
View file

@ -12,7 +12,8 @@ import { sendAllProps } from "../../types/api";
import { ChatMessageType, ChatType } from "../../types/chat";
import ChatInput from "./chatInput";
const _ = require("lodash");
import _ from "lodash";
import _ from "lodash";
export default function ChatModal({
flow,

2
src/frontend/src/modals/codeAreaModal/index.tsx
View file

@ -7,7 +7,7 @@ import "ace-builds/src-noconflict/mode-python";
import "ace-builds/src-noconflict/theme-github";
import "ace-builds/src-noconflict/theme-twilight";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/webpack-resolver";
// import "ace-builds/webpack-resolver";
import { darkContext } from "../../contexts/darkContext";
import { checkCode } from "../../controllers/API";
import { alertContext } from "../../contexts/alertContext";

2
src/frontend/src/pages/FlowPage/components/tabComponent/index.tsx
View file

@ -3,7 +3,7 @@ import { useContext, useState } from "react";
import { TabsContext } from "../../../../contexts/tabsContext";
import { FlowType } from "../../../../types/flow";
var _ = require("lodash");
import _ from "lodash";
export default function TabComponent({
selected,

2
src/frontend/src/pages/FlowPage/index.tsx
View file

@ -17,6 +17,7 @@ import ReactFlow, {
OnNodesDelete,
SelectionDragHandler,
} from "reactflow";
import _ from "lodash";
import { locationContext } from "../../contexts/locationContext";
import ExtraSidebar from "./components/extraSidebarComponent";
import Chat from "../../components/chatComponent";
@ -34,7 +35,6 @@ const nodeTypes = {
genericNode: GenericNode,
};
var _ = require("lodash");
export default function FlowPage({ flow }: { flow: FlowType }) {
let { updateFlow, incrementNodeId, disableCP} =

2
src/frontend/src/utils.ts
View file

@ -19,7 +19,7 @@ import {
import { Connection, Edge, Node, ReactFlowInstance } from "reactflow";
import { FlowType } from "./types/flow";
import { APITemplateType, TemplateVariableType } from "./types/api";
var _ = require("lodash");
import _ from "lodash";
export function classNames(...classes: Array<string>) {
return classes.filter(Boolean).join(" ");

7
src/frontend/tailwind.config.js
View file

@ -1,7 +1,10 @@
/** @type {import('tailwindcss').Config} */
const plugin = require("tailwindcss/plugin");
import plugin from "tailwindcss/plugin";
module.exports = {
content: ["./src/**/*.{js,ts,tsx,jsx}"],
content: [
"./index.html",
"./src/**/*.{js,ts,tsx,jsx}",
],
darkMode: "class",
important: true,
theme: {

34
src/frontend/vite.config.ts Normal file
View file

@ -0,0 +1,34 @@
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
const apiRoutes = [
'/all',
'/predict',
'^/validate/*',
'^/chat/*',
];
const proxyTargets = apiRoutes.reduce((proxyObj, route) => {
proxyObj[route] = {
target: 'http://127.0.0.1:7860',
changeOrigin: true,
secure: false,
ws: true,
};
return proxyObj;
}, {});
export default defineConfig(() => {
return {
build: {
outDir: 'build',
},
plugins: [react()],
server: {
port: 3000,
proxy: {
...proxyTargets
}
},
};
});