Skip to content

Commit

Permalink
fix(player): replace sucrase with esbuild
Browse files Browse the repository at this point in the history
  • Loading branch information
@mihar-22
mihar-22 committed Aug 8, 2024
1 parent e3376e8 commit 3a12e45
Show file tree
Hide file tree
Showing 5 changed files with 216 additions and 114 deletions.
2 changes: 0 additions & 2 deletions packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,6 @@
"devDependencies": {
"@maverick-js/cli": "0.43.2",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^5.0.7",
"@rollup/plugin-sucrase": "^5.0.2",
"@types/fs-extra": "^11.0.4",
"@types/react": "^18.3.3",
"@types/react-dom": "^18.3.0",
Expand Down
60 changes: 47 additions & 13 deletions packages/react/rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,7 @@ import path from 'node:path';
import { fileURLToPath } from 'node:url';

import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import sucrase from '@rollup/plugin-sucrase';
import { transform as esbuild } from 'esbuild';
import fs from 'fs-extra';
import { defineConfig } from 'rollup';
import dts from 'rollup-plugin-dts';
Expand Down Expand Up @@ -169,24 +168,59 @@ function defineNPMBundle({ dev }) {
? ['development', 'production', 'default']
: ['production', 'default'],
}),
sucrase({
production: true,
disableESTransforms: true,
exclude: ['node_modules/**'],
transforms: ['typescript', 'jsx'],
jsxPragma: 'React.createElement',
jsxFragmentPragma: 'React.Fragment',
}),
replace({
preventAssignment: true,
__DEV__: dev ? 'true' : 'false',
typescript({
define: {
__DEV__: dev ? 'true' : 'false',
},
}),
rscDirectives(),
!dev && copyAssets(),
],
};
}

/**
* @param {import('esbuild').TransformOptions} options
* @returns {import('rollup').Plugin}
*/
function typescript(options) {
const include = /\.[jt]sx?$/;
return {
name: 'typescript',
resolveId(id, importer) {
if (importer && id[0] === '.') {
const resolvedPath = path.resolve(importer ? path.dirname(importer) : process.cwd(), id),
filePath = resolveFile(resolvedPath);

if (filePath) {
return filePath;
}

if (fs.existsSync(resolvedPath) && fs.statSync(resolvedPath).isDirectory()) {
return resolveFile(resolvedPath, true);
}
}
},
transform(code, id) {
if (!include.test(id)) return;
return esbuild(code, {
target: 'esnext',
loader: 'tsx',
sourcemap: true,
...options,
});
},
};
}

const tsFileExtensions = ['tsx', 'ts'];
function resolveFile(file, index = false) {
for (const ext of tsFileExtensions) {
const filePath = index ? path.join(file, `index.${ext}`) : `${file}.${ext}`;
if (fs.existsSync(filePath)) return filePath;
}
}

/** @returns {import('rollup').Plugin} */
function resolveVidstack() {
return {
Expand Down
2 changes: 0 additions & 2 deletions packages/vidstack/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,6 @@
},
"dependencies": {
"@floating-ui/dom": "^1.6.10",
"@rollup/plugin-sucrase": "^5.0.2",
"lit-html": "^2.8.0",
"media-captions": "^1.0.4",
"unplugin": "^1.12.0"
Expand All @@ -50,7 +49,6 @@
"@open-wc/semantic-dom-diff": "^0.20.1",
"@open-wc/testing-helpers": "^3.0.1",
"@rollup/plugin-node-resolve": "^15.2.3",
"@rollup/plugin-replace": "^5.0.7",
"@types/fs-extra": "^11.0.4",
"@types/fscreen": "^1.0.4",
"autoprefixer": "^10.4.20",
Expand Down
151 changes: 99 additions & 52 deletions packages/vidstack/rollup.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ import path from 'node:path';
import { fileURLToPath } from 'node:url';

import { nodeResolve } from '@rollup/plugin-node-resolve';
import replace from '@rollup/plugin-replace';
import sucrase from '@rollup/plugin-sucrase';
import * as lexer from 'es-module-lexer';
import { transform as esbuild } from 'esbuild';
import fs from 'fs-extra';
Expand Down Expand Up @@ -169,17 +167,14 @@ function defineNPMBundle({ type }) {
? ['production', 'default']
: ['development', 'production', 'default'],
}),
sucrase({
disableESTransforms: true,
exclude: ['node_modules/**'],
transforms: ['typescript'],
}),
replace({
preventAssignment: true,
__DEV__: !isProd && !isServer ? 'true' : 'false',
__SERVER__: isServer ? 'true' : 'false',
__CDN__: MODE_CDN ? 'true' : 'false',
__TEST__: 'false',
typescript({
platform: isServer ? 'node' : 'browser',
define: {
__DEV__: !isProd && !isServer ? 'true' : 'false',
__SERVER__: isServer ? 'true' : 'false',
__CDN__: MODE_CDN ? 'true' : 'false',
__TEST__: 'false',
},
}),
// Only copy assets once in dev.
!isProd && !isServer && copyAssets(),
Expand All @@ -188,6 +183,62 @@ function defineNPMBundle({ type }) {
};
}

/** @returns {import('rollup').Plugin} */
function minify() {
return {
name: 'minify',
renderChunk(code) {
return esbuild(code, {
target: 'esnext',
format: 'esm',
platform: 'browser',
minify: true,
loader: 'js',
legalComments: 'none',
});
},
};
}

/**
* @param {import('esbuild').TransformOptions} options
* @returns {import('rollup').Plugin}
*/
function typescript(options) {
const include = /\.[jt]sx?$/;
return {
name: 'typescript',
resolveId(id, importer) {
if (importer && id[0] === '.') {
const resolvedPath = path.resolve(importer ? path.dirname(importer) : process.cwd(), id),
filePath = resolveFile(resolvedPath);

if (filePath) {
return filePath;
}

if (fs.existsSync(resolvedPath) && fs.statSync(resolvedPath).isDirectory()) {
return resolveFile(resolvedPath, true);
}
}
},
transform(code, id) {
if (!include.test(id)) return;
return esbuild(code, {
target: 'esnext',
loader: 'ts',
sourcemap: true,
...options,
});
},
};
}

function resolveFile(resolved, index = false) {
const filePath = index ? path.join(resolved, `index.ts`) : `${resolved}.ts`;
return fs.existsSync(filePath) ? filePath : null;
}

/**
* Transform element entry points into basically no-ops server-side.
*
Expand Down Expand Up @@ -332,41 +383,39 @@ function defineCDNBundle({ dev = false, input, dir, file, legacy = false }) {
external: CDN_EXTERNAL_PACKAGES,
plugins: [
.../** @type {import('rollup').Plugin[]} */ (npmBundle.plugins),
!dev && {
name: 'minify',
renderChunk(code) {
return esbuild(code, {
target: 'esnext',
format: 'esm',
platform: 'browser',
minify: true,
loader: 'js',
});
},
},
!legacy && {
// This plugin rewrites chunk paths so our URL rewrites to jsDelivr work.
name: 'cdn-chunks',
async generateBundle(_, bundle) {
const __dirname = path.dirname(fileURLToPath(import.meta.url)),
version = JSON.parse(
await fs.readFile(path.join(__dirname, 'package.json'), 'utf-8'),
).version;

for (const chunk of Object.values(bundle)) {
if (chunk.type === 'chunk' && chunk.isEntry && chunk.name === file) {
chunk.code = chunk.code.replace(
/\"\.\/(chunks|providers)\/(.*?)\"/g,
`"https://cdn.jsdelivr.net/npm/@vidstack/cdn@${version}/$1/$2"`,
);
}
}
},
},
!dev && minify(),
!legacy && rewriteCDNChunks(file),
],
};
}

/**
* This plugin rewrites chunk paths so our URL rewrites to jsDelivr work.
*
* @param {string} file
* @returns {import('rollup').Plugin}
*/
function rewriteCDNChunks(file) {
return {
name: 'cdn-chunks',
async generateBundle(_, bundle) {
const __dirname = path.dirname(fileURLToPath(import.meta.url)),
version = JSON.parse(
await fs.readFile(path.join(__dirname, 'package.json'), 'utf-8'),
).version;

for (const chunk of Object.values(bundle)) {
if (chunk.type === 'chunk' && chunk.isEntry && chunk.name === file) {
chunk.code = chunk.code.replace(
/\"\.\/(chunks|providers)\/(.*?)\"/g,
`"https://cdn.jsdelivr.net/npm/@vidstack/cdn@${version}/$1/$2"`,
);
}
}
},
};
}

function getBaseInputs() {
return {
vidstack: 'src/index.ts',
Expand Down Expand Up @@ -427,15 +476,13 @@ function getPluginsBundles() {
treeshake: true,
plugins: [
nodeResolve(),
sucrase({
disableESTransforms: true,
exclude: ['node_modules/**'],
transforms: ['typescript'],
}),
replace({
preventAssignment: true,
__DEV__: 'false',
typescript({
platform: 'node',
define: {
__DEV__: 'false',
},
}),
minify(),
],
},
];
Expand Down
Loading

0 comments on commit 3a12e45

Please sign in to comment.