@editframe/create 0.30.2-beta.0 → 0.31.0-beta.0
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.
- package/dist/templates/animejs/index.html +1 -1
- package/dist/templates/animejs/package.json +3 -3
- package/dist/templates/animejs/src/index.ts +59 -33
- package/dist/templates/animejs/vite.config.ts +0 -3
- package/dist/templates/blank-html/index.html +21 -0
- package/dist/templates/blank-html/package.json +17 -0
- package/dist/templates/blank-html/postcss.config.cjs +5 -0
- package/dist/templates/blank-html/src/assets/.gitkeep +0 -0
- package/dist/templates/blank-html/src/index.js +2 -0
- package/dist/templates/blank-html/src/styles.css +8 -0
- package/dist/templates/blank-html/tailwind.config.js +8 -0
- package/dist/templates/blank-html/vite.config.ts +14 -0
- package/dist/templates/blank-react/index.html +16 -0
- package/dist/templates/blank-react/package.json +24 -0
- package/dist/templates/blank-react/postcss.config.cjs +5 -0
- package/dist/templates/blank-react/src/Video.tsx +17 -0
- package/dist/templates/blank-react/src/assets/.gitkeep +0 -0
- package/dist/templates/blank-react/src/main.tsx +11 -0
- package/dist/templates/blank-react/src/styles.css +14 -0
- package/dist/templates/blank-react/tailwind.config.js +8 -0
- package/dist/templates/blank-react/tsconfig.json +11 -0
- package/dist/templates/blank-react/vite.config.ts +16 -0
- package/dist/templates/card-poetry/index.html +1 -0
- package/dist/templates/card-poetry/package.json +3 -3
- package/dist/templates/card-poetry/vite.config.ts +0 -3
- package/dist/templates/html/index.html +22 -0
- package/dist/templates/html/package.json +17 -0
- package/dist/templates/html/postcss.config.cjs +5 -0
- package/dist/templates/html/src/assets/.gitkeep +0 -0
- package/dist/templates/html/src/index.js +2 -0
- package/dist/templates/html/src/styles.css +8 -0
- package/dist/templates/html/tailwind.config.js +8 -0
- package/dist/templates/html/vite.config.ts +14 -0
- package/dist/templates/react/index.html +13 -0
- package/dist/templates/react/package.json +24 -0
- package/dist/templates/react/postcss.config.cjs +5 -0
- package/dist/templates/react/src/Video.tsx +17 -0
- package/dist/templates/react/src/assets/.gitkeep +0 -0
- package/dist/templates/react/src/main.tsx +11 -0
- package/dist/templates/react/src/styles.css +14 -0
- package/dist/templates/react/tailwind.config.js +8 -0
- package/dist/templates/react/tsconfig.json +11 -0
- package/dist/templates/react/vite.config.ts +16 -0
- package/dist/templates/react-demo/package.json +3 -3
- package/dist/templates/react-demo/src/Video.tsx +1 -0
- package/dist/templates/react-demo/vite.config.ts +0 -3
- package/dist/templates/simple-demo/index.html +3 -2
- package/dist/templates/simple-demo/package.json +3 -3
- package/dist/templates/simple-demo/src/styles.css +6 -0
- package/dist/templates/simple-demo/vite.config.ts +0 -3
- package/package.json +1 -1
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
</head>
|
|
56
56
|
|
|
57
57
|
<body>
|
|
58
|
-
<ef-timegroup mode="sequence" fps="30" overlap="0.5s"
|
|
58
|
+
<ef-timegroup workbench mode="sequence" fps="30" overlap="0.5s"
|
|
59
59
|
class="w-[500px] h-[500px] bg-slate-500 relative overflow-hidden">
|
|
60
60
|
<ef-timegroup id="text-intro" mode="fixed" duration="3s" class="text-white bg-indigo-600">
|
|
61
61
|
<div class="demo-section">
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"author": "",
|
|
12
12
|
"license": "ISC",
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@editframe/cli": "0.
|
|
15
|
-
"@editframe/elements": "0.
|
|
16
|
-
"@editframe/vite-plugin": "0.
|
|
14
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
15
|
+
"@editframe/elements": "0.31.0-beta.0",
|
|
16
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
17
17
|
"animejs": "^4.2.2",
|
|
18
18
|
"prismjs": "^1.30.0",
|
|
19
19
|
"tailwindcss": "^3.4.3",
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import "@editframe/elements";
|
|
2
2
|
import "@editframe/elements/styles.css";
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
animate,
|
|
5
|
+
svg,
|
|
6
|
+
splitText,
|
|
7
|
+
stagger,
|
|
8
|
+
createTimeline,
|
|
9
|
+
waapi,
|
|
10
|
+
} from "animejs";
|
|
4
11
|
import Prism from "prismjs";
|
|
5
12
|
import "prismjs/themes/prism-tomorrow.css";
|
|
6
13
|
import "prismjs/components/prism-javascript";
|
|
@@ -51,7 +58,10 @@ pyramidTimegroup.addFrameTask(({ ownCurrentTimeMs }) => {
|
|
|
51
58
|
// ============================================================================
|
|
52
59
|
// Section 3: WAAPI animation
|
|
53
60
|
// ============================================================================
|
|
54
|
-
const { chars: waapiChars } = splitText("#waapi-demo h2", {
|
|
61
|
+
const { chars: waapiChars } = splitText("#waapi-demo h2", {
|
|
62
|
+
words: false,
|
|
63
|
+
chars: true,
|
|
64
|
+
});
|
|
55
65
|
|
|
56
66
|
const waapiAnimation = waapi.animate(waapiChars, {
|
|
57
67
|
translate: `0 -2rem`,
|
|
@@ -97,45 +107,61 @@ racetrackTimegroup.addFrameTask(({ ownCurrentTimeMs }) => {
|
|
|
97
107
|
const transitionsTimeline = createTimeline({
|
|
98
108
|
autoplay: false,
|
|
99
109
|
defaults: {
|
|
100
|
-
ease: "linear"
|
|
101
|
-
}
|
|
110
|
+
ease: "linear",
|
|
111
|
+
},
|
|
102
112
|
});
|
|
103
113
|
|
|
104
114
|
// Add all transitions to the timeline with proper timing
|
|
105
115
|
// text-intro: starts at 0, stays until 2750ms, slides out
|
|
106
116
|
transitionsTimeline
|
|
107
|
-
.add(
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
117
|
+
.add(
|
|
118
|
+
"#text-intro",
|
|
119
|
+
{
|
|
120
|
+
keyframes: [
|
|
121
|
+
{ x: "0%", duration: 2750 },
|
|
122
|
+
{ x: "-100%", duration: 250 },
|
|
123
|
+
],
|
|
124
|
+
},
|
|
125
|
+
0,
|
|
126
|
+
)
|
|
113
127
|
// pyramid: starts at 2500ms (0.5s overlap), slides in, stays, slides out
|
|
114
|
-
.add(
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
128
|
+
.add(
|
|
129
|
+
"#pyramid",
|
|
130
|
+
{
|
|
131
|
+
keyframes: [
|
|
132
|
+
{ x: "100%", duration: 0 },
|
|
133
|
+
{ x: "0%", duration: 250 },
|
|
134
|
+
{ x: "0%", duration: 2500 },
|
|
135
|
+
{ x: "-100%", duration: 250 },
|
|
136
|
+
],
|
|
137
|
+
},
|
|
138
|
+
2500,
|
|
139
|
+
)
|
|
122
140
|
// waapi-demo: starts at 5000ms, slides in, stays, slides out
|
|
123
|
-
.add(
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
141
|
+
.add(
|
|
142
|
+
"#waapi-demo",
|
|
143
|
+
{
|
|
144
|
+
keyframes: [
|
|
145
|
+
{ x: "100%", duration: 0 },
|
|
146
|
+
{ x: "0%", duration: 250 },
|
|
147
|
+
{ x: "0%", duration: 2500 },
|
|
148
|
+
{ x: "-100%", duration: 250 },
|
|
149
|
+
],
|
|
150
|
+
},
|
|
151
|
+
5000,
|
|
152
|
+
)
|
|
131
153
|
// racetrack: starts at 7500ms, slides in, stays
|
|
132
|
-
.add(
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
154
|
+
.add(
|
|
155
|
+
"#racetrack",
|
|
156
|
+
{
|
|
157
|
+
keyframes: [
|
|
158
|
+
{ x: "100%", duration: 0 },
|
|
159
|
+
{ x: "0%", duration: 250 },
|
|
160
|
+
{ x: "0%", duration: 5750 },
|
|
161
|
+
],
|
|
162
|
+
},
|
|
163
|
+
7500,
|
|
164
|
+
);
|
|
139
165
|
|
|
140
166
|
const rootTimegroup = document.querySelector('ef-timegroup[mode="sequence"]')!;
|
|
141
167
|
rootTimegroup.addFrameTask(({ currentTimeMs }) => {
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="h-screen w-full">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Editframe Project</title>
|
|
8
|
+
<script type="module" src="./src/index.js"></script>
|
|
9
|
+
<link rel="stylesheet" href="./src/styles.css" />
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body class="h-full w-full m-0 p-0 bg-slate-900">
|
|
13
|
+
<ef-timegroup workbench mode="sequence" class="w-[1920px] h-[1080px] bg-black relative overflow-hidden">
|
|
14
|
+
<!-- Add your composition here -->
|
|
15
|
+
<ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full flex items-center justify-center">
|
|
16
|
+
<ef-text duration="5s" class="text-white text-4xl">Your video starts here</ef-text>
|
|
17
|
+
</ef-timegroup>
|
|
18
|
+
</ef-timegroup>
|
|
19
|
+
</body>
|
|
20
|
+
|
|
21
|
+
</html>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "editframe-project",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "editframe preview"
|
|
8
|
+
},
|
|
9
|
+
"dependencies": {
|
|
10
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
11
|
+
"@editframe/elements": "0.31.0-beta.0",
|
|
12
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
13
|
+
"tailwindcss": "^3.4.3",
|
|
14
|
+
"vite": "^6.3.5",
|
|
15
|
+
"vite-plugin-singlefile": "^2.0.1"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { vitePluginEditframe } from "@editframe/vite-plugin";
|
|
3
|
+
import { defineConfig } from "vite";
|
|
4
|
+
import { viteSingleFile } from "vite-plugin-singlefile";
|
|
5
|
+
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [
|
|
8
|
+
vitePluginEditframe({
|
|
9
|
+
root: path.join(__dirname, "src"),
|
|
10
|
+
cacheRoot: path.join(__dirname, "src", "assets"),
|
|
11
|
+
}),
|
|
12
|
+
viteSingleFile(),
|
|
13
|
+
],
|
|
14
|
+
});
|
|
@@ -0,0 +1,16 @@
|
|
|
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>Editframe Project</title>
|
|
8
|
+
<script type="module" src="./src/main.tsx"></script>
|
|
9
|
+
<link rel="stylesheet" href="./src/styles.css" />
|
|
10
|
+
</head>
|
|
11
|
+
|
|
12
|
+
<body>
|
|
13
|
+
<div id="root" class="w-full h-full"></div>
|
|
14
|
+
</body>
|
|
15
|
+
|
|
16
|
+
</html>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "editframe-project",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "editframe preview"
|
|
8
|
+
},
|
|
9
|
+
"dependencies": {
|
|
10
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
11
|
+
"@editframe/react": "0.31.0-beta.0",
|
|
12
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
13
|
+
"@vitejs/plugin-react": "^4.3.1",
|
|
14
|
+
"tailwindcss": "^3.4.3",
|
|
15
|
+
"vite": "^6.3.5",
|
|
16
|
+
"vite-plugin-singlefile": "^2.0.1",
|
|
17
|
+
"react": "^18.3.0",
|
|
18
|
+
"react-dom": "^18.3.0"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@types/react": "^18.3.0",
|
|
22
|
+
"@types/react-dom": "^18.3.0"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Timegroup, Text } from "@editframe/react";
|
|
3
|
+
|
|
4
|
+
export const Video = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Timegroup
|
|
7
|
+
workbench
|
|
8
|
+
className="w-[1920px] h-[1080px] bg-black flex items-center justify-center relative overflow-hidden"
|
|
9
|
+
mode="sequence"
|
|
10
|
+
>
|
|
11
|
+
{/* Add your composition here */}
|
|
12
|
+
<Timegroup mode="fixed" duration="5s" className="absolute w-full h-full flex items-center justify-center">
|
|
13
|
+
<Text duration="5s" className="text-white text-4xl">Your video starts here</Text>
|
|
14
|
+
</Timegroup>
|
|
15
|
+
</Timegroup>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import { Video } from "./Video";
|
|
4
|
+
import "@editframe/elements/styles.css";
|
|
5
|
+
|
|
6
|
+
const root = document.getElementById("root");
|
|
7
|
+
if (!root) {
|
|
8
|
+
throw new Error("Root element not found");
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
ReactDOM.createRoot(root).render(<Video />);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { vitePluginEditframe } from "@editframe/vite-plugin";
|
|
3
|
+
import react from "@vitejs/plugin-react";
|
|
4
|
+
import { defineConfig } from "vite";
|
|
5
|
+
import { viteSingleFile } from "vite-plugin-singlefile";
|
|
6
|
+
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
plugins: [
|
|
9
|
+
vitePluginEditframe({
|
|
10
|
+
root: path.join(__dirname, "src"),
|
|
11
|
+
cacheRoot: path.join(__dirname, "src", "assets"),
|
|
12
|
+
}),
|
|
13
|
+
viteSingleFile(),
|
|
14
|
+
react(),
|
|
15
|
+
],
|
|
16
|
+
});
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"author": "",
|
|
12
12
|
"license": "ISC",
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@editframe/cli": "0.
|
|
15
|
-
"@editframe/elements": "0.
|
|
16
|
-
"@editframe/vite-plugin": "0.
|
|
14
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
15
|
+
"@editframe/elements": "0.31.0-beta.0",
|
|
16
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
17
17
|
"tailwindcss": "^3.4.3",
|
|
18
18
|
"vite": "^6.3.5",
|
|
19
19
|
"vite-plugin-singlefile": "^2.0.1"
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" class="h-screen w-full">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Editframe Project</title>
|
|
7
|
+
<script type="module" src="./src/index.js"></script>
|
|
8
|
+
<link rel="stylesheet" href="./src/styles.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body class="h-full w-full m-0 p-0 bg-slate-900">
|
|
11
|
+
<ef-timegroup
|
|
12
|
+
workbench
|
|
13
|
+
mode="sequence"
|
|
14
|
+
class="w-[1920px] h-[1080px] bg-black relative overflow-hidden"
|
|
15
|
+
>
|
|
16
|
+
<!-- Add your composition here -->
|
|
17
|
+
<ef-timegroup mode="fixed" duration="5s" class="absolute w-full h-full flex items-center justify-center">
|
|
18
|
+
<ef-text duration="5s" class="text-white text-4xl">Your video starts here</ef-text>
|
|
19
|
+
</ef-timegroup>
|
|
20
|
+
</ef-timegroup>
|
|
21
|
+
</body>
|
|
22
|
+
</html>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "editframe-project",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "editframe preview"
|
|
8
|
+
},
|
|
9
|
+
"dependencies": {
|
|
10
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
11
|
+
"@editframe/elements": "0.31.0-beta.0",
|
|
12
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
13
|
+
"tailwindcss": "^3.4.3",
|
|
14
|
+
"vite": "^6.3.5",
|
|
15
|
+
"vite-plugin-singlefile": "^2.0.1"
|
|
16
|
+
}
|
|
17
|
+
}
|
|
File without changes
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { vitePluginEditframe } from "@editframe/vite-plugin";
|
|
3
|
+
import { defineConfig } from "vite";
|
|
4
|
+
import { viteSingleFile } from "vite-plugin-singlefile";
|
|
5
|
+
|
|
6
|
+
export default defineConfig({
|
|
7
|
+
plugins: [
|
|
8
|
+
vitePluginEditframe({
|
|
9
|
+
root: path.join(__dirname, "src"),
|
|
10
|
+
cacheRoot: path.join(__dirname, "src", "assets"),
|
|
11
|
+
}),
|
|
12
|
+
viteSingleFile(),
|
|
13
|
+
],
|
|
14
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>Editframe Project</title>
|
|
7
|
+
<script type="module" src="./src/main.tsx"></script>
|
|
8
|
+
<link rel="stylesheet" href="./src/styles.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<div id="root" class="w-full h-full"></div>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "editframe-project",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"start": "editframe preview"
|
|
8
|
+
},
|
|
9
|
+
"dependencies": {
|
|
10
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
11
|
+
"@editframe/react": "0.31.0-beta.0",
|
|
12
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
13
|
+
"@vitejs/plugin-react": "^4.3.1",
|
|
14
|
+
"tailwindcss": "^3.4.3",
|
|
15
|
+
"vite": "^6.3.5",
|
|
16
|
+
"vite-plugin-singlefile": "^2.0.1",
|
|
17
|
+
"react": "^18.3.0",
|
|
18
|
+
"react-dom": "^18.3.0"
|
|
19
|
+
},
|
|
20
|
+
"devDependencies": {
|
|
21
|
+
"@types/react": "^18.3.0",
|
|
22
|
+
"@types/react-dom": "^18.3.0"
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Timegroup, Text } from "@editframe/react";
|
|
3
|
+
|
|
4
|
+
export const Video = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Timegroup
|
|
7
|
+
workbench
|
|
8
|
+
className="w-[1920px] h-[1080px] bg-black flex items-center justify-center relative overflow-hidden"
|
|
9
|
+
mode="sequence"
|
|
10
|
+
>
|
|
11
|
+
{/* Add your composition here */}
|
|
12
|
+
<Timegroup mode="fixed" duration="5s" className="absolute w-full h-full flex items-center justify-center">
|
|
13
|
+
<Text duration="5s" className="text-white text-4xl">Your video starts here</Text>
|
|
14
|
+
</Timegroup>
|
|
15
|
+
</Timegroup>
|
|
16
|
+
);
|
|
17
|
+
};
|
|
File without changes
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import ReactDOM from "react-dom/client";
|
|
3
|
+
import { Video } from "./Video";
|
|
4
|
+
import "@editframe/elements/styles.css";
|
|
5
|
+
|
|
6
|
+
const root = document.getElementById("root");
|
|
7
|
+
if (!root) {
|
|
8
|
+
throw new Error("Root element not found");
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
ReactDOM.createRoot(root).render(<Video />);
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import path from "node:path";
|
|
2
|
+
import { vitePluginEditframe } from "@editframe/vite-plugin";
|
|
3
|
+
import react from "@vitejs/plugin-react";
|
|
4
|
+
import { defineConfig } from "vite";
|
|
5
|
+
import { viteSingleFile } from "vite-plugin-singlefile";
|
|
6
|
+
|
|
7
|
+
export default defineConfig({
|
|
8
|
+
plugins: [
|
|
9
|
+
vitePluginEditframe({
|
|
10
|
+
root: path.join(__dirname, "src"),
|
|
11
|
+
cacheRoot: path.join(__dirname, "src", "assets"),
|
|
12
|
+
}),
|
|
13
|
+
viteSingleFile(),
|
|
14
|
+
react(),
|
|
15
|
+
],
|
|
16
|
+
});
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"author": "",
|
|
12
12
|
"license": "ISC",
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@editframe/cli": "0.
|
|
15
|
-
"@editframe/react": "0.
|
|
16
|
-
"@editframe/vite-plugin": "0.
|
|
14
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
15
|
+
"@editframe/react": "0.31.0-beta.0",
|
|
16
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
17
17
|
"@vitejs/plugin-react": "^4.3.1",
|
|
18
18
|
"tailwindcss": "^3.4.3",
|
|
19
19
|
"vite": "^6.3.5",
|
|
@@ -5,9 +5,6 @@ import { defineConfig } from "vite";
|
|
|
5
5
|
import { viteSingleFile } from "vite-plugin-singlefile";
|
|
6
6
|
|
|
7
7
|
export default defineConfig({
|
|
8
|
-
define: {
|
|
9
|
-
'globalThis.EF_DEV_WORKBENCH': 'true',
|
|
10
|
-
},
|
|
11
8
|
plugins: [
|
|
12
9
|
vitePluginEditframe({
|
|
13
10
|
root: path.join(__dirname, "src"),
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="en" class="h-screen w-full">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8" />
|
|
5
5
|
<script type="module" src="./src/index.js"></script>
|
|
6
6
|
<link rel="stylesheet" href="./src/styles.css" />
|
|
7
7
|
</head>
|
|
8
|
-
<body>
|
|
8
|
+
<body class="h-full w-full m-0 p-0">
|
|
9
9
|
<ef-timegroup
|
|
10
|
+
workbench
|
|
10
11
|
mode="sequence"
|
|
11
12
|
class="w-[500px] h-[500px] bg-slate-500 relative overflow-hidden"
|
|
12
13
|
>
|
|
@@ -11,9 +11,9 @@
|
|
|
11
11
|
"author": "",
|
|
12
12
|
"license": "ISC",
|
|
13
13
|
"dependencies": {
|
|
14
|
-
"@editframe/cli": "0.
|
|
15
|
-
"@editframe/elements": "0.
|
|
16
|
-
"@editframe/vite-plugin": "0.
|
|
14
|
+
"@editframe/cli": "0.31.0-beta.0",
|
|
15
|
+
"@editframe/elements": "0.31.0-beta.0",
|
|
16
|
+
"@editframe/vite-plugin": "0.31.0-beta.0",
|
|
17
17
|
"tailwindcss": "^3.4.3",
|
|
18
18
|
"vite": "^6.3.5",
|
|
19
19
|
"vite-plugin-singlefile": "^2.0.1"
|
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
@tailwind components;
|
|
3
3
|
@tailwind utilities;
|
|
4
4
|
|
|
5
|
+
/* Ensure workbench fills viewport when directly in body */
|
|
6
|
+
body > ef-workbench {
|
|
7
|
+
width: 100vw !important;
|
|
8
|
+
height: 100vh !important;
|
|
9
|
+
}
|
|
10
|
+
|
|
5
11
|
@keyframes slide-up {
|
|
6
12
|
from {
|
|
7
13
|
transform: translateY(100%);
|