@revideo/create 0.1.5 → 0.1.8

package/index.js

@@ -29,7 +29,7 @@ const PLUGINS = {
   ffmpeg: {
     package: '@revideo/ffmpeg',
     variable: 'ffmpeg',
-    version: '^0.1.2',
+    version: '^0.1.5',
   },
 };
 
@@ -63,7 +63,7 @@ const PLUGINS = {
       type: 'text',
       name: 'name',
       message: 'Project name',
-      initial: 'my-animation',
+      initial: 'my-revideo-project',
       validate: value =>
         isValidPackageName(value)
           ? true
@@ -95,76 +95,28 @@ const PLUGINS = {
       },
       format: value => path.resolve(value),
     },
-    {
-      type: 'select',
-      name: 'language',
-      message: 'Language',
-      choices: [
-        {
-          title: 'TypeScript (Recommended)',
-          value: 'ts',
-        },
-        {
-          title: 'JavaScript',
-          value: 'js',
-        },
-      ],
-    },
-    {
-      type: 'multiselect',
-      name: 'plugins',
-      message: 'How would you like to render your animation?',
-      choices: [
-        {
-          title: 'Image sequence',
-          value: 'core',
-          disabled: true,
-          selected: true,
-        },
-        {
-          title: 'Video (FFmpeg)',
-          value: 'ffmpeg',
-          selected: true,
-        },
-      ],
-      warn: 'This option is always included.',
-      onRender() {
-        this.value[0].selected = true;
-      },
-      validate: value => {
-        if (!Array.isArray(value)) {
-          return '"plugins" option must be an array.';
-        }
-
-        if (!value.includes('core')) {
-          return 'Image sequence is required.';
-        }
-
-        return true;
-      },
-    },
   ]);
 
-  if (!response.plugins) {
+  if (!response.path) {
     console.log(kleur.red('× Scaffolding aborted by the user.\n'));
     return;
   }
 
+  const plugins = [PLUGINS.core, PLUGINS.ffmpeg];
   const templateDir = path.resolve(
     fileURLToPath(import.meta.url),
     '..',
-    `template-2d-${response.language}`,
+    `template-2d-ts`,
   );
   copyDirectory(templateDir, response.path);
-  createConfig(response);
+  createConfig(response, plugins);
 
   const manifest = JSON.parse(
     fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8'),
   );
   manifest.name = response.name;
   manifest.dependencies ??= {};
-  for (const plugin of response.plugins) {
-    const data = PLUGINS[plugin];
+  for (const data of plugins) {
     if (data.version) {
       manifest.dependencies[data.package] = data.version;
     }
@@ -226,27 +178,27 @@ function copy(src, dest) {
   }
 }
 
-function createConfig(response) {
+function createConfig(response, selectedPlugins) {
   const imports = [];
   const plugins = [];
-  for (const plugin of response.plugins) {
-    const data = PLUGINS[plugin];
+  for (const data of selectedPlugins) {
     imports.push(`import ${data.variable} from '${data.package}';\n`);
     plugins.push(`${data.variable}(${data.options?.(response) ?? ''}),`);
   }
 
-  const configFile = path.resolve(
-    response.path,
-    `vite.config.${response.language}`,
-  );
+  imports.push("import { rendererPlugin } from 'revideo/renderer';");
+  plugins.push('rendererPlugin()');
+
+  const configFile = path.resolve(response.path, `vite.config.ts`);
 
   fs.writeFileSync(
     configFile,
     `import {defineConfig} from 'vite';
 ${imports.join('')}
+import { rendererPlugin } from '@revideo/renderer';
 export default defineConfig({
   plugins: [
-    ${plugins.join('\n    ')}
+    ${plugins.join('\n    ')},
   ],
 });
 `,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revideo/create",
-  "version": "0.1.5",
+  "version": "0.1.8",
   "description": "Quickly scaffold revideo projects",
   "main": "index.js",
   "author": "revideo",
@@ -20,14 +20,15 @@
     "url": "https://github.com/havenhq/revideo.git"
   },
   "devDependencies": {
-    "@revideo/2d": "^0.1.5",
-    "@revideo/core": "^0.1.5",
-    "@revideo/ui": "^0.1.5",
-    "@revideo/vite-plugin": "^0.1.5"
+    "@revideo/2d": "^0.1.8",
+    "@revideo/core": "^0.1.8",
+    "@revideo/renderer": "^0.1.8",
+    "@revideo/ui": "^0.1.8",
+    "@revideo/vite-plugin": "^0.1.8"
   },
   "dependencies": {
     "minimist": "^1.2.8",
     "prompts": "^2.4.2"
   },
-  "gitHead": "96a2de236b225a3565aa353f5d908bbcd367eff9"
+  "gitHead": "308ff0a4c35544fe0182d1037914f5ee02639f0b"
 }

package/template-2d-ts/node_modules/.vite/deps_temp_1df31ee2/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/template-2d-ts/package.json

@@ -5,15 +5,17 @@
   "scripts": {
     "start": "vite",
     "serve": "vite",
-    "build": "tsc && vite build"
+    "build": "tsc && vite build",
+    "render": "tsc && node dist/render.js"
   },
   "dependencies": {
-    "@revideo/core": "*",
-    "@revideo/2d": "*"
+    "@revideo/core": "^0.1.7",
+    "@revideo/2d": "^0.1.7",
+    "@revideo/renderer": "^0.1.7"
   },
   "devDependencies": {
-    "@revideo/ui": "*",
-    "@revideo/vite-plugin": "*",
+    "@revideo/ui": "^0.1.7",
+    "@revideo/vite-plugin": "^0.1.7",
     "typescript": "^5.2.2",
     "vite": "^4.5"
   }

package/template-2d-ts/src/project.meta

@@ -0,0 +1,31 @@
+{
+  "version": 0,
+  "shared": {
+    "background": null,
+    "range": [
+      0,
+      null
+    ],
+    "size": {
+      "x": 1920,
+      "y": 1080
+    },
+    "audioOffset": 0
+  },
+  "preview": {
+    "fps": 30,
+    "resolutionScale": 1
+  },
+  "rendering": {
+    "fps": 30,
+    "resolutionScale": 1,
+    "colorSpace": "srgb",
+    "exporter": {
+      "name": "@revideo/ffmpeg",
+      "options": {
+        "fastStart": true,
+        "includeAudio": true
+      }
+    }
+  }
+}

package/template-2d-ts/src/render.ts

@@ -0,0 +1,3 @@
+import {renderVideo} from '@revideo/renderer';
+
+renderVideo('./vite.config.ts');

package/template-2d-ts/src/scenes/example.tsx

@@ -1,12 +1,38 @@
-import {Circle, makeScene2D} from '@revideo/2d';
-import {createRef} from '@revideo/core';
+import {Audio, Img, Video, makeScene2D} from '@revideo/2d';
+import {all, chain, createRef, waitFor} from '@revideo/core';
 
 export default makeScene2D(function* (view) {
-  // Create your animations here
+  const logoRef = createRef<Img>();
 
-  const circle = createRef<Circle>();
+  yield view.add(
+    <>
+      <Video
+        src={'https://revideo-example-assets.s3.amazonaws.com/stars.mp4'}
+        size={['100%', '100%']}
+        play={true}
+      />
+      <Audio
+        src={'https://revideo-example-assets.s3.amazonaws.com/chill-beat.mp3'}
+        play={true}
+        time={17.0}
+      />
+    </>,
+  );
 
-  view.add(<Circle ref={circle} size={320} fill={'lightseagreen'} />);
+  yield* waitFor(1);
 
-  yield* circle().scale(2, 2).to(1, 2);
+  view.add(
+    <Img
+      width={'1%'}
+      ref={logoRef}
+      src={
+        'https://revideo-example-assets.s3.amazonaws.com/revideo-logo-white.png'
+      }
+    />,
+  );
+
+  yield* chain(
+    all(logoRef().scale(40, 2), logoRef().rotation(360, 2)),
+    logoRef().scale(60, 1),
+  );
 });

package/template-2d-ts/tsconfig.json

@@ -1,4 +1,9 @@
 {
   "extends": "@revideo/2d/tsconfig.project.json",
-  "include": ["src"]
+  "include": ["src"],
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist",
+    "module": "CommonJS"
+  }
 }

package/template-2d-js/gitignore

@@ -1,15 +0,0 @@
-# Generated files
-node_modules
-output
-dist
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?

package/template-2d-js/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "2d-starter",
-  "private": true,
-  "version": "0.0.0",
-  "scripts": {
-    "start": "vite",
-    "serve": "vite",
-    "build": "vite build"
-  },
-  "dependencies": {
-    "@revideo/core": "*",
-    "@revideo/2d": "*"
-  },
-  "devDependencies": {
-    "@revideo/ui": "*",
-    "@revideo/vite-plugin": "*",
-    "vite": "^4.5"
-  }
-}

package/template-2d-js/src/project.js

@@ -1,7 +0,0 @@
-import {makeProject} from '@revideo/core';
-
-import example from './scenes/example?scene';
-
-export default makeProject({
-  scenes: [example],
-});

package/template-2d-js/src/scenes/example.jsx

@@ -1,12 +0,0 @@
-import {Circle, makeScene2D} from '@revideo/2d';
-import {createRef} from '@revideo/core';
-
-export default makeScene2D(function* (view) {
-  // Create your animations here
-
-  const circle = createRef();
-
-  view.add(<Circle ref={circle} size={320} fill={'lightseagreen'} />);
-
-  yield* circle().scale(2, 2).to(1, 2);
-});

package/template-2d-ts/gitignore

@@ -1,15 +0,0 @@
-# Generated files
-node_modules
-output
-dist
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-.DS_Store
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?