npm - pellicule - Versions diffs - 0.0.0 → 0.0.1 - Mend

pellicule 0.0.0 → 0.0.1

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.

Files changed (11) hide show

package/package.json CHANGED Viewed

@@ -1,42 +1,34 @@
 {
   "name": "pellicule",
-  "version": "0.0.0",
+  "version": "0.0.1",
   "description": "Deterministic video rendering with Vue",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./render": "./src/render.js"
+  },
   "keywords": [
     "vue",
     "video",
     "rendering",
     "animation",
     "frames",
-    "remotion",
     "programmatic-video"
   ],
-  "author": "",
+  "author": "Kelvin Omereshone <kelvin@sailscasts.com>",
   "license": "MIT",
+  "homepage": "https://docs.sailscasts.com/pellicule",
   "repository": {
     "type": "git",
-    "url": ""
+    "url": "https://github.com/sailscastshq/pellicule"
   },
-  "homepage": "",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./dist/index.d.ts"
-    }
+  "dependencies": {
+    "vite": "^5.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "playwright": "^1.40.0"
   },
-  "files": [
-    "dist"
-  ],
   "peerDependencies": {
     "vue": "^3.0.0"
-  },
-  "devDependencies": {
-    "vue": "^3.4.0",
-    "typescript": "^5.0.0"
   }
 }

package/src/bundler/vite.js ADDED Viewed

@@ -0,0 +1,124 @@
+import { createServer } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import { writeFile, mkdir, rm } from 'fs/promises'
+import { join, resolve, dirname, basename } from 'path'
+import { fileURLToPath } from 'url'
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const pelliculeSrc = resolve(__dirname, '..')
+/**
+ * Creates a Vite dev server in the user's project directory.
+ * This way Vite naturally finds their node_modules with Vue installed.
+ *
+ * @param {object} options
+ * @param {string} options.input - Path to the .vue file
+ * @param {number} options.width - Video width
+ * @param {number} options.height - Video height
+ * @returns {Promise<{ server: object, url: string, cleanup: function }>}
+ */
+export async function createVideoServer(options) {
+  const { input, width = 1920, height = 1080 } = options
+  const inputPath = resolve(input)
+  const inputDir = dirname(inputPath)
+  const inputFile = basename(inputPath)
+  // Create .pellicule temp folder in user's project
+  const tempDir = join(inputDir, '.pellicule')
+  await mkdir(tempDir, { recursive: true })
+  // Create entry HTML
+  const htmlContent = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    html, body { width: ${width}px; height: ${height}px; overflow: hidden; }
+    #app { width: 100%; height: 100%; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./entry.js"></script>
+</body>
+</html>`
+  // Create entry JS with setFrame function for fast frame updates
+  const entryContent = `
+import { createApp, ref, provide, h, nextTick } from 'vue'
+import VideoComponent from '../${inputFile}'
+// Pellicule injection keys (must match composables.js)
+const FRAME_KEY = Symbol.for('pellicule-frame')
+const CONFIG_KEY = Symbol.for('pellicule-config')
+// Get initial config from URL
+const params = new URLSearchParams(window.location.search)
+const fps = parseInt(params.get('fps') || '30', 10)
+const durationInFrames = parseInt(params.get('duration') || '90', 10)
+const width = parseInt(params.get('width') || '${width}', 10)
+const height = parseInt(params.get('height') || '${height}', 10)
+const config = { fps, durationInFrames, width, height }
+// Frame ref - reactive, will trigger re-render when changed
+const frameRef = ref(0)
+// Expose setFrame function for the renderer to call
+window.__PELLICULE_SET_FRAME__ = async (frame) => {
+  frameRef.value = frame
+  await nextTick() // Wait for Vue to re-render
+}
+try {
+  // Create app with frame context
+  const app = createApp({
+    setup() {
+      provide(FRAME_KEY, frameRef)
+      provide(CONFIG_KEY, config)
+      return () => h(VideoComponent)
+    }
+  })
+  app.mount('#app')
+  window.__PELLICULE_READY__ = true
+} catch (error) {
+  console.error('Pellicule render error:', error)
+  window.__PELLICULE_READY__ = true
+  window.__PELLICULE_ERROR__ = error.message
+}
+`
+  await writeFile(join(tempDir, 'index.html'), htmlContent)
+  await writeFile(join(tempDir, 'entry.js'), entryContent)
+  // Create Vite server rooted in the user's project directory
+  const server = await createServer({
+    root: tempDir,
+    plugins: [vue()],
+    server: {
+      port: 0,
+      strictPort: false
+    },
+    resolve: {
+      alias: {
+        'pellicule': pelliculeSrc
+      }
+    },
+    logLevel: 'warn'
+  })
+  await server.listen()
+  const address = server.httpServer.address()
+  const url = `http://localhost:${address.port}`
+  const cleanup = async () => {
+    await server.close()
+    await rm(tempDir, { recursive: true, force: true })
+  }
+  return { server, url, cleanup, tempDir }
+}

package/src/composables.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { inject, computed } from 'vue'
+/**
+ * Injection keys for Pellicule context
+ * Using Symbol.for() so keys are shared across module instances
+ */
+export const FRAME_KEY = Symbol.for('pellicule-frame')
+export const CONFIG_KEY = Symbol.for('pellicule-config')
+/**
+ * Get the current frame number.
+ * Must be used within a Pellicule render context.
+ *
+ * @returns {import('vue').ComputedRef<number>} Current frame number
+ *
+ * @example
+ * const frame = useFrame()
+ * const opacity = computed(() => frame.value / 30) // fade in over 1 second at 30fps
+ */
+export function useFrame() {
+  const frame = inject(FRAME_KEY)
+  if (frame === undefined) {
+    throw new Error(
+      'useFrame() must be used within a Pellicule render context'
+    )
+  }
+  return computed(() => frame.value)
+}
+/**
+ * Get the video configuration (fps, duration, dimensions).
+ * Must be used within a Pellicule render context.
+ *
+ * @returns {{ fps: number, durationInFrames: number, width: number, height: number }}
+ *
+ * @example
+ * const { fps, durationInFrames, width, height } = useVideoConfig()
+ */
+export function useVideoConfig() {
+  const config = inject(CONFIG_KEY)
+  if (!config) {
+    throw new Error(
+      'useVideoConfig() must be used within a Pellicule render context'
+    )
+  }
+  return config
+}

package/src/index.js ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * Pellicule - Deterministic video rendering with Vue
+ *
+ * This is the browser-safe entry point.
+ * For rendering (Node.js), import from 'pellicule/render'
+ */
+// Composables
+export { useFrame, useVideoConfig, FRAME_KEY, CONFIG_KEY } from './composables.js'
+// Animation utilities
+export { interpolate, sequence, Easing } from './math.js'

package/src/math.js ADDED Viewed

@@ -0,0 +1,78 @@
+/**
+ * Easing functions for smooth animations
+ */
+export const Easing = {
+  linear: (t) => t,
+  easeIn: (t) => t * t,
+  easeOut: (t) => t * (2 - t),
+  easeInOut: (t) => (t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t)
+}
+/**
+ * Maps a value from one range to another.
+ * The core animation primitive in Pellicule.
+ *
+ * @param {number} frame - Current frame number
+ * @param {[number, number]} inputRange - [startFrame, endFrame]
+ * @param {[number, number]} outputRange - [startValue, endValue]
+ * @param {object} options - Optional settings
+ * @param {function} options.easing - Easing function (default: linear)
+ * @param {'clamp'|'extend'} options.extrapolate - Behavior outside input range
+ * @returns {number} Interpolated value
+ *
+ * @example
+ * // Fade in over first 30 frames
+ * const opacity = interpolate(frame, [0, 30], [0, 1])
+ *
+ * @example
+ * // Slide from left with easing
+ * const x = interpolate(frame, [0, 60], [-100, 0], { easing: Easing.easeOut })
+ */
+export function interpolate(frame, inputRange, outputRange, options = {}) {
+  const { easing = Easing.linear, extrapolate = 'clamp' } = options
+  const [inStart, inEnd] = inputRange
+  const [outStart, outEnd] = outputRange
+  // Calculate progress (0 to 1)
+  let progress = (frame - inStart) / (inEnd - inStart)
+  // Handle extrapolation
+  if (extrapolate === 'clamp') {
+    progress = Math.max(0, Math.min(1, progress))
+  }
+  // Apply easing
+  const easedProgress = easing(progress)
+  // Map to output range
+  return outStart + (outEnd - outStart) * easedProgress
+}
+/**
+ * Creates a sequence of timed animations.
+ * Useful for staggered or chained animations.
+ *
+ * @param {number} frame - Current frame number
+ * @param {Array<{start: number, end: number, from: number, to: number}>} sequence
+ * @returns {number} Current value in the sequence
+ *
+ * @example
+ * const scale = sequence(frame, [
+ *   { start: 0, end: 15, from: 0, to: 1 },    // grow
+ *   { start: 45, end: 60, from: 1, to: 0 }    // shrink
+ * ])
+ */
+export function sequence(frame, steps) {
+  for (const step of steps) {
+    if (frame >= step.start && frame <= step.end) {
+      return interpolate(frame, [step.start, step.end], [step.from, step.to])
+    }
+    if (frame < step.start) {
+      return step.from
+    }
+  }
+  // Return last value if past all steps
+  const lastStep = steps[steps.length - 1]
+  return lastStep ? lastStep.to : 0
+}

package/src/render.js ADDED Viewed

@@ -0,0 +1,8 @@
+/**
+ * Pellicule Renderer - Node.js only
+ *
+ * This module requires Node.js and cannot run in the browser.
+ */
+export { renderVideo } from './renderer/render.js'
+export { encodeVideo, renderToMp4 } from './renderer/encode.js'

package/src/renderer/encode.js ADDED Viewed

@@ -0,0 +1,95 @@
+import { spawn } from 'child_process'
+import path from 'path'
+/**
+ * Encodes PNG frames into an MP4 video using FFmpeg.
+ *
+ * @param {object} options
+ * @param {string} options.framesDir - Directory containing frame-XXXXX.png files
+ * @param {string} options.output - Output video path (default: './output.mp4')
+ * @param {number} options.fps - Frames per second (default: 30)
+ * @param {boolean} options.silent - Suppress console output (default: false)
+ * @returns {Promise<string>} Path to the output video
+ */
+export function encodeVideo(options) {
+  const {
+    framesDir,
+    output = './output.mp4',
+    fps = 30,
+    silent = false
+  } = options
+  return new Promise((resolve, reject) => {
+    const framePattern = path.join(framesDir, 'frame-%05d.png')
+    const args = [
+      '-y', // Overwrite output
+      '-framerate', String(fps),
+      '-i', framePattern,
+      '-c:v', 'libx264',
+      '-pix_fmt', 'yuv420p', // Compatibility
+      '-preset', 'fast',
+      output
+    ]
+    if (!silent) {
+      console.log(`Encoding video: ffmpeg ${args.join(' ')}`)
+    }
+    const ffmpeg = spawn('ffmpeg', args)
+    ffmpeg.stderr.on('data', (data) => {
+      // FFmpeg outputs progress to stderr
+      if (!silent) {
+        const line = data.toString()
+        if (line.includes('frame=')) {
+          process.stdout.write(`\r${line.trim()}`)
+        }
+      }
+    })
+    ffmpeg.on('close', (code) => {
+      if (!silent) {
+        console.log('') // New line after progress
+      }
+      if (code === 0) {
+        if (!silent) {
+          console.log(`Video saved to ${output}`)
+        }
+        resolve(output)
+      } else {
+        reject(new Error(`FFmpeg exited with code ${code}`))
+      }
+    })
+    ffmpeg.on('error', (err) => {
+      reject(new Error(`ffmpeg error: ${err.message}. Is ffmpeg installed?`))
+    })
+  })
+}
+/**
+ * Full render pipeline: Vue component → frames → MP4
+ *
+ * @param {object} options - Same as renderVideo, plus output path
+ * @param {boolean} options.silent - Suppress console output (default: false)
+ * @returns {Promise<string>} Path to the output video
+ */
+export async function renderToMp4(options) {
+  const { renderVideo } = await import('./render.js')
+  const { output = './output.mp4', silent = false, ...renderOptions } = options
+  // Step 1: Render frames
+  const { framesDir } = await renderVideo({ ...renderOptions, silent })
+  // Step 2: Encode to MP4
+  const videoPath = await encodeVideo({
+    framesDir,
+    output,
+    fps: renderOptions.fps || 30,
+    silent
+  })
+  return videoPath
+}

package/src/renderer/render.js ADDED Viewed

@@ -0,0 +1,120 @@
+import { chromium } from 'playwright'
+import { createVideoServer } from '../bundler/vite.js'
+import { mkdir } from 'fs/promises'
+import { join } from 'path'
+/**
+ * Renders a .vue component to video frames.
+ *
+ * @param {object} options
+ * @param {string} options.input - Path to the .vue file
+ * @param {number} options.fps - Frames per second (default: 30)
+ * @param {number} options.durationInFrames - Total frames to render
+ * @param {number} options.width - Video width in pixels (default: 1920)
+ * @param {number} options.height - Video height in pixels (default: 1080)
+ * @param {string} options.outputDir - Directory for frame images (default: './frames')
+ * @param {function} options.onProgress - Progress callback
+ * @returns {Promise<{ framesDir: string, totalFrames: number }>}
+ */
+export async function renderVideo(options) {
+  const {
+    input,
+    fps = 30,
+    durationInFrames,
+    width = 1920,
+    height = 1080,
+    outputDir = './frames',
+    onProgress,
+    silent = false
+  } = options
+  const log = silent ? () => {} : console.log.bind(console)
+  const startTime = Date.now()
+  // Start Vite server with the video component
+  log(`Starting Vite server for ${input}...`)
+  const viteStart = Date.now()
+  const { url, cleanup } = await createVideoServer({ input, width, height })
+  log(`Server ready in ${Date.now() - viteStart}ms`)
+  // Ensure output directory exists
+  await mkdir(outputDir, { recursive: true })
+  // Launch browser
+  const browser = await chromium.launch()
+  const context = await browser.newContext({
+    viewport: { width, height },
+    deviceScaleFactor: 1
+  })
+  const page = await context.newPage()
+  // Capture console errors (only log if not silent)
+  page.on('console', msg => {
+    if (msg.type() === 'error' && !silent) {
+      console.error('Browser error:', msg.text())
+    }
+  })
+  page.on('pageerror', error => {
+    if (!silent) {
+      console.error('Page error:', error.message)
+    }
+  })
+  log(`Rendering ${durationInFrames} frames at ${fps}fps (${width}x${height})`)
+  try {
+    // Load page ONCE with config
+    const pageUrl = `${url}?fps=${fps}&duration=${durationInFrames}&width=${width}&height=${height}`
+    await page.goto(pageUrl, { waitUntil: 'networkidle' })
+    // Wait for Vue to mount
+    await page.waitForFunction(() => window.__PELLICULE_READY__ === true, { timeout: 10000 })
+    // Check for errors
+    const error = await page.evaluate(() => window.__PELLICULE_ERROR__)
+    if (error) {
+      throw new Error(`Render error: ${error}`)
+    }
+    const renderStart = Date.now()
+    // Render each frame by updating the frame ref (no page reload!)
+    for (let frame = 0; frame < durationInFrames; frame++) {
+      // Update frame number - Vue reactivity handles re-render
+      await page.evaluate((f) => window.__PELLICULE_SET_FRAME__(f), frame)
+      // Screenshot
+      const framePath = join(outputDir, `frame-${String(frame).padStart(5, '0')}.png`)
+      await page.screenshot({ path: framePath })
+      // Progress callback
+      if (onProgress) {
+        const elapsed = Date.now() - renderStart
+        const currentFps = (frame + 1) / (elapsed / 1000)
+        onProgress({ frame, total: durationInFrames, fps: currentFps })
+      }
+      // Log progress every 10 frames
+      if (frame % 10 === 0 || frame === durationInFrames - 1) {
+        const percent = Math.round(((frame + 1) / durationInFrames) * 100)
+        const elapsed = Date.now() - renderStart
+        const framesPerSec = ((frame + 1) / (elapsed / 1000)).toFixed(1)
+        log(`Frame ${frame + 1}/${durationInFrames} (${percent}%) - ${framesPerSec} fps`)
+      }
+    }
+    const renderTime = Date.now() - renderStart
+    log(`Rendered ${durationInFrames} frames in ${renderTime}ms (${(durationInFrames / (renderTime / 1000)).toFixed(1)} fps)`)
+  } finally {
+    await browser.close()
+    await cleanup()
+  }
+  log(`Total time: ${Date.now() - startTime}ms`)
+  log(`Frames saved to ${outputDir}`)
+  return { framesDir: outputDir, totalFrames: durationInFrames }
+}

package/dist/index.cjs DELETED Viewed

@@ -1,6 +0,0 @@
-/**
- * Pellicule - Deterministic video rendering with Vue
- */
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VERSION = '0.0.0';

package/dist/index.d.ts DELETED Viewed

@@ -1,4 +0,0 @@
-/**
- * Pellicule - Deterministic video rendering with Vue
- */
-export declare const VERSION = "0.0.0";

package/dist/index.js DELETED Viewed

@@ -1,4 +0,0 @@
-/**
- * Pellicule - Deterministic video rendering with Vue
- */
-export const VERSION = '0.0.0';