From fa968c6582399feb22c8a7729d5ed655c491a491 Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Thu, 25 Apr 2024 10:52:44 -0500 Subject: [PATCH 1/4] Mux Uploader Server Component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## How it works ### Defaults If no `endpoint` is specified, will use `@mux/mux-node` to create a direct upload with the following configuration: ```ts { cors_origin: '*', new_asset_settings: { playback_policy: ['public'], encoding_tier: 'baseline', } ``` ### How to configure Accepts all the same params as Mux Uploader, as well as ```ts interface MuxUploaderServerProps extends MuxUploaderProps { clientOptions?: ClientOptions; uploadCreateParams?: Partial; uploadRequestOptions?: Partial; } ``` `uploadCreateParams` will be deep-merged with the default options described above ## TODO items: - [ ] get some feedback - [ ] answer some questions 👇 - [ ] documentation ## Outstanding questions: for those of you who know esbuild and bundlers better than I do: - [ ] why is @mux/mux-uploader-react/rsc giving me a red squiggle in the nextjs example? why can't typescript find it? - [ ] is it correct to external:server-only even though it's not a peer dependency? --- examples/nextjs-with-typescript/.env.example | 2 + .../app/MuxUploaderRSC/page.tsx | 21 ++++ .../nextjs-with-typescript/pages/index.tsx | 1 + packages/mux-uploader-react/package.json | 29 ++++- packages/mux-uploader-react/src/index.tsx | 3 +- packages/mux-uploader-react/src/rsc.tsx | 73 +++++++++++++ yarn.lock | 103 ++++++++++++++++++ 7 files changed, 226 insertions(+), 6 deletions(-) create mode 100644 examples/nextjs-with-typescript/.env.example create mode 100644 examples/nextjs-with-typescript/app/MuxUploaderRSC/page.tsx create mode 100644 packages/mux-uploader-react/src/rsc.tsx diff --git a/examples/nextjs-with-typescript/.env.example b/examples/nextjs-with-typescript/.env.example new file mode 100644 index 000000000..1f22119fa --- /dev/null +++ b/examples/nextjs-with-typescript/.env.example @@ -0,0 +1,2 @@ +MUX_TOKEN_ID= +MUX_TOKEN_SECRET= \ No newline at end of file diff --git a/examples/nextjs-with-typescript/app/MuxUploaderRSC/page.tsx b/examples/nextjs-with-typescript/app/MuxUploaderRSC/page.tsx new file mode 100644 index 000000000..595d072dd --- /dev/null +++ b/examples/nextjs-with-typescript/app/MuxUploaderRSC/page.tsx @@ -0,0 +1,21 @@ +import MuxUploader from '@mux/mux-uploader-react/rsc'; +import { Metadata } from "next"; + + +export const metadata: Metadata = { + title: " Server Component Demo" +} +function MuxUploaderPage() { + return ( + + ); +} + +export default MuxUploaderPage; diff --git a/examples/nextjs-with-typescript/pages/index.tsx b/examples/nextjs-with-typescript/pages/index.tsx index 1c5fa4e41..de069dc93 100644 --- a/examples/nextjs-with-typescript/pages/index.tsx +++ b/examples/nextjs-with-typescript/pages/index.tsx @@ -19,6 +19,7 @@ function HomePage() {
  • <MuxPlayer>
    (lazy + @mux/blurup)
  • <MuxUploader>
  • <MuxUploader> (Separate Components)
    • +
  • <MuxUploader> (Server Component)
  • <mux-video>
    (Web Component)
  • <mux-audio>
    (Web Component)
  • <mux-player>
    (Web Component)
    • diff --git a/packages/mux-uploader-react/package.json b/packages/mux-uploader-react/package.json index fb0b57895..bd5571cf9 100644 --- a/packages/mux-uploader-react/package.json +++ b/packages/mux-uploader-react/package.json @@ -17,11 +17,17 @@ "<4.3.5": { ".": [ "./dist/types-ts3.4/index.d.ts" + ], + "./rsc": [ + "./dist/types-ts3.4/rsc.d.ts" ] }, "*": { ".": [ "./dist/types/index.d.ts" + ], + "./rsc": [ + "./dist/types/rsc.d.ts" ] } }, @@ -32,6 +38,13 @@ "default": "./dist/index.cjs.js", "types@<4.3.5": "./dist/types-ts3.4/index.d.ts", "types": "./dist/types/index.d.ts" + }, + "./rsc": { + "import": "./dist/rsc.mjs", + "require": "./dist/rsc.cjs.js", + "default": "./dist/rsc.cjs.js", + "types@<4.3.5": "./dist/types-ts3.4/rsc.d.ts", + "types": "./dist/types/rsc.d.ts" } }, "types": "./dist/types/index.d.ts", @@ -46,13 +59,17 @@ "clean": "shx rm -rf dist/", "dev:cjs": "yarn build:cjs --watch=forever", "dev:esm": "yarn build:esm --watch=forever", + "dev:rsc:cjs": "yarn build:rsc:cjs --watch=forever", + "dev:rsc:esm": "yarn build:rsc:esm --watch=forever", "dev:types": "yarn build:types -w", - "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm", - "build:cjs": "esbuild src/index.tsx --target=es2019 --minify --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:prop-types", - "build:esm": "esbuild src/index.tsx --target=es2019 --minify --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:prop-types", + "dev": "npm-run-all --parallel dev:types dev:cjs dev:esm dev:rsc:cjs dev:rsc:esm", + "build:cjs": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/cjs.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:prop-types", + "build:esm": "esbuild src/index.tsx --target=es2019 --bundle --sourcemap --metafile=./dist/esm.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:prop-types", + "build:rsc:cjs": "esbuild src/rsc.tsx --target=es2019 --platform=node --bundle --sourcemap --metafile=./dist/cjs-rsc.json --format=cjs --loader:.css=text --outdir=dist --out-extension:.js=.cjs.js --external:react --external:prop-types --external:server-only --external:./index", + "build:rsc:esm": "esbuild src/rsc.tsx --target=es2019 --platform=node --bundle --sourcemap --metafile=./dist/esm-rsc.json --format=esm --loader:.css=text --outdir=dist --out-extension:.js=.mjs --external:react --external:prop-types --external:server-only --external:./index", "build:types": "tsc", "postbuild:types": "downlevel-dts ./dist/types ./dist/types-ts3.4", - "build": "npm-run-all --parallel 'build:cjs --minify' 'build:esm --minify'", + "build": "npm-run-all --parallel 'build:cjs --minify' 'build:esm --minify' 'build:rsc:cjs --minify' 'build:rsc:esm --minify'", "create-release-notes": "create-release-notes ./CHANGELOG.md", "publish-release": "../../scripts/publish.sh" }, @@ -70,8 +87,10 @@ } }, "dependencies": { + "@mux/mux-node": "^8.5.0", "@mux/mux-uploader": "1.0.0-beta.16", - "prop-types": "^15.7.2" + "prop-types": "^15.7.2", + "server-only": "^0.0.1" }, "devDependencies": { "@types/prop-types": "^15.7.12", diff --git a/packages/mux-uploader-react/src/index.tsx b/packages/mux-uploader-react/src/index.tsx index 9379aab5f..600c2a849 100644 --- a/packages/mux-uploader-react/src/index.tsx +++ b/packages/mux-uploader-react/src/index.tsx @@ -17,7 +17,7 @@ import useObjectPropEffect from './useObjectPropEffect'; export type MuxUploaderRefAttributes = MuxUploaderElement; -interface GenericEventListener { +export interface GenericEventListener { (evt: T): void; } @@ -101,6 +101,7 @@ const MuxUploader = React.forwardRef return ; }); +// don't forget to also add these exports to ./rsc export { MuxUploaderDrop, MuxUploaderFileSelect, MuxUploaderProgress, MuxUploaderRetry, MuxUploaderStatus }; export default MuxUploader; diff --git a/packages/mux-uploader-react/src/rsc.tsx b/packages/mux-uploader-react/src/rsc.tsx new file mode 100644 index 000000000..df50e9376 --- /dev/null +++ b/packages/mux-uploader-react/src/rsc.tsx @@ -0,0 +1,73 @@ +import React from 'react'; +import 'server-only'; + +import Mux, { MuxError, type ClientOptions } from '@mux/mux-node'; + +import MuxUploaderClient, { + MuxUploaderDrop, + MuxUploaderFileSelect, + MuxUploaderProgress, + MuxUploaderRetry, + MuxUploaderStatus, +} from './index'; +import type { MuxUploaderRefAttributes, MuxUploaderProps } from './index'; + +const getTokenMessage = (error: any) => + `Error creating Mux Upload. Typically, this means your MUX_TOKEN_ID or MUX_TOKEN_SECRET is missing. If they're not available in process.env, make sure they're properly passed to MuxUploader: + + + +Here's the original error thrown by @mux/mux-node -- ${error}`; + +const getGenericMessage = (error: any) => + `Error creating Mux Upload. If you're passing clientOptions, uploadCreateParams, or uploadRequestOptions to MuxUploader, double-check their values. + +Here's the original error thrown by @mux/mux-node -- ${error}`; + +// as our default export, the server component. +interface MuxUploaderServerProps extends MuxUploaderProps { + clientOptions?: ClientOptions; + uploadCreateParams?: Partial; + uploadRequestOptions?: Partial; +} +const MuxUploader = React.forwardRef( + /* @ts-expect-error our version of react/typescript doesn't yet support async components */ + async ({ clientOptions, uploadCreateParams, uploadRequestOptions, endpoint, ...props }, ref) => { + let _endpoint = endpoint; + let uploadId: string | undefined; + if (!_endpoint) { + // if there's no endpoint defined, create a new direct upload + // https://docs.mux.com/guides/upload-files-directly + try { + const mux = new Mux(clientOptions); + const _uploadCreateParams: Mux.Video.Uploads.UploadCreateParams = { + cors_origin: '*', + ...uploadCreateParams, + new_asset_settings: { + playback_policy: ['public'], + encoding_tier: 'baseline', + ...uploadCreateParams?.new_asset_settings, + }, + }; + const upload = await mux.video.uploads.create(_uploadCreateParams, uploadRequestOptions); + _endpoint = upload.url; + uploadId = upload.id; + } catch (error) { + if (error instanceof MuxError) { + const message = error.message.includes('MUX_') ? getTokenMessage(error) : getGenericMessage(error); + throw new Error(message); + } else { + throw error; + } + } + } + // todo: i'm a little unsure about this data-upload-id interface. + // I want a way for consumers to access more info about the upload object + // in case they want a client-side interaction, like onSuccess poll-to-redirect. + return ; + } +); + +export { MuxUploaderDrop, MuxUploaderFileSelect, MuxUploaderProgress, MuxUploaderRetry, MuxUploaderStatus }; + +export default MuxUploader; diff --git a/yarn.lock b/yarn.lock index 793e63c7b..ee8a7219a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2531,6 +2531,23 @@ dependencies: image-dimensions "^2.3.0" +"@mux/mux-node@^8.5.0": + version "8.5.0" + resolved "https://registry.yarnpkg.com/@mux/mux-node/-/mux-node-8.5.0.tgz#268a5b73d69cabb3bbdcedd9eb0d7dea93e7c1b8" + integrity sha512-+7Mq3k/LG1BmGsAxtHlrPUyf65KDD78+8eLcuO8XUgYGxeeA8gTDCyRrXb0GNlnkGPXcaSVVfDCdPcerc/9psQ== + dependencies: + "@types/node" "^18.11.18" + "@types/node-fetch" "^2.6.4" + "@types/qs" "^6.9.7" + abort-controller "^3.0.0" + agentkeepalive "^4.2.1" + form-data-encoder "1.7.2" + formdata-node "^4.3.2" + jose "^4.14.4" + node-fetch "^2.6.7" + qs "^6.10.3" + web-streams-polyfill "^3.2.1" + "@mux/upchunk@^3.3.3": version "3.3.3" resolved "https://registry.yarnpkg.com/@mux/upchunk/-/upchunk-3.3.3.tgz#45f2293a1773819ae49bd9f6fb6af7847148fb29" @@ -3776,6 +3793,14 @@ resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-8.2.3.tgz#bbeb55fbc73f28ea6de601fbfa4613f58d785323" integrity sha512-ekGvFhFgrc2zYQoX4JeZPmVzZxw6Dtllga7iGHzfbYIYkAMUx/sAFP2GdFpLff+vdHXu5fl7WX9AT+TtqYcsyw== +"@types/node-fetch@^2.6.4": + version "2.6.11" + resolved "https://registry.yarnpkg.com/@types/node-fetch/-/node-fetch-2.6.11.tgz#9b39b78665dae0e82a08f02f4967d62c66f95d24" + integrity sha512-24xFj9R5+rfQJLRyM56qh+wnVSYhyXC2tkoBndtY0U+vubqNsYXGjufB2nn8Q6gt0LrARwL6UBtMCSVCwl4B1g== + dependencies: + "@types/node" "*" + form-data "^4.0.0" + "@types/node@*", "@types/node@^18.11.18": version "18.11.18" resolved "https://registry.yarnpkg.com/@types/node/-/node-18.11.18.tgz#8dfb97f0da23c2293e554c5a50d61ef134d7697f" @@ -3828,6 +3853,11 @@ resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb" integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw== +"@types/qs@^6.9.7": + version "6.9.15" + resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.15.tgz#adde8a060ec9c305a82de1babc1056e73bd64dce" + integrity sha512-uXHQKES6DQKKCLh441Xv/dwxOq1TVS3JPUMlEqoEglvlhR6Mxnlew/Xq/LRVHpLyk7iK3zODe1qYHIMltO7XGg== + "@types/range-parser@*": version "1.2.4" resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" @@ -4688,6 +4718,13 @@ abbrev@1: resolved "https://registry.yarnpkg.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8" integrity sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q== +abort-controller@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/abort-controller/-/abort-controller-3.0.0.tgz#eaf54d53b62bae4138e809ca225c8439a6efb392" + integrity sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg== + dependencies: + event-target-shim "^5.0.0" + accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8: version "1.3.8" resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e" @@ -4772,6 +4809,13 @@ agentkeepalive@^4.1.3: depd "^1.1.2" humanize-ms "^1.2.1" +agentkeepalive@^4.2.1: + version "4.5.0" + resolved "https://registry.yarnpkg.com/agentkeepalive/-/agentkeepalive-4.5.0.tgz#2673ad1389b3c418c5a20c5d7364f93ca04be923" + integrity sha512-5GG/5IbQQpC9FpkRGsSvZI5QYeSCzlJHdpBQntCsuTOxhKD8lqKhrleg2Yi7yvMIf82Ycmmqln9U8V9qwEiJew== + dependencies: + humanize-ms "^1.2.1" + aggregate-error@^3.0.0, aggregate-error@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/aggregate-error/-/aggregate-error-3.1.0.tgz#92670ff50f5359bdb7a3e0d40d0ec30c5737687a" @@ -8077,6 +8121,11 @@ etag@^1.8.1, etag@~1.8.1: resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887" integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg== +event-target-shim@^5.0.0: + version "5.0.1" + resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-5.0.1.tgz#5d4d3ebdf9583d63a5333ce2deb7480ab2b05789" + integrity sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ== + event-target-shim@^6.0.2: version "6.0.2" resolved "https://registry.yarnpkg.com/event-target-shim/-/event-target-shim-6.0.2.tgz#ea5348c3618ee8b62ff1d344f01908ee2b8a2b71" @@ -8447,6 +8496,11 @@ fork-ts-checker-webpack-plugin@^6.5.0: semver "^7.3.2" tapable "^1.0.0" +form-data-encoder@1.7.2: + version "1.7.2" + resolved "https://registry.yarnpkg.com/form-data-encoder/-/form-data-encoder-1.7.2.tgz#1f1ae3dccf58ed4690b86d87e4f57c654fbab040" + integrity sha512-qfqtYan3rxrnCk1VYaA4H+Ms9xdpPqvLZa6xmMgFvhO32x7/3J/ExcTd6qpxM0vH2GdMI+poehyBZvqfMTto8A== + form-data@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/form-data/-/form-data-3.0.1.tgz#ebd53791b78356a99af9a300d4282c4d5eb9755f" @@ -8456,6 +8510,15 @@ form-data@^3.0.0: combined-stream "^1.0.8" mime-types "^2.1.12" +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + form-data@~2.3.2: version "2.3.3" resolved "https://registry.yarnpkg.com/form-data/-/form-data-2.3.3.tgz#dcce52c05f644f298c6a7ab936bd724ceffbf3a6" @@ -8465,6 +8528,14 @@ form-data@~2.3.2: combined-stream "^1.0.6" mime-types "^2.1.12" +formdata-node@^4.3.2: + version "4.4.1" + resolved "https://registry.yarnpkg.com/formdata-node/-/formdata-node-4.4.1.tgz#23f6a5cb9cb55315912cbec4ff7b0f59bbd191e2" + integrity sha512-0iirZp3uVDjVGt9p49aTaqjk84TrglENEDuqfdlZQ1roC9CWlPk6Avf8EEnZNcAqPonwkG35x4n3ww/1THYAeQ== + dependencies: + node-domexception "1.0.0" + web-streams-polyfill "4.0.0-beta.3" + forwarded@0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811" @@ -10428,6 +10499,11 @@ jmespath@0.16.0: resolved "https://registry.yarnpkg.com/jmespath/-/jmespath-0.16.0.tgz#b15b0a85dfd4d930d43e69ed605943c802785076" integrity sha512-9FzQjJ7MATs1tSpnco1K6ayiYE3figslrXA72G2HQ/n76RzvYlofyi5QM+iX4YRs/pu3yzxlVQSST23+dMDknw== +jose@^4.14.4: + version "4.15.5" + resolved "https://registry.yarnpkg.com/jose/-/jose-4.15.5.tgz#6475d0f467ecd3c630a1b5dadd2735a7288df706" + integrity sha512-jc7BFxgKPKi94uOvEmzlSWFFe2+vASyXaKUpdQKatWAESU2MWjDfFf0fdfc83CDKcA5QecabZeNLyfhe3yKNkg== + js-sdsl@^4.1.4: version "4.2.0" resolved "https://registry.yarnpkg.com/js-sdsl/-/js-sdsl-4.2.0.tgz#278e98b7bea589b8baaf048c20aeb19eb7ad09d0" @@ -11625,6 +11701,11 @@ no-case@^3.0.4: lower-case "^2.0.2" tslib "^2.0.3" +node-domexception@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/node-domexception/-/node-domexception-1.0.0.tgz#6888db46a1f71c0b76b3f7555016b63fe64766e5" + integrity sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ== + node-fetch@2.6.7, node-fetch@^2.6.1, node-fetch@^2.6.7: version "2.6.7" resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.7.tgz#24de9fba827e3b4ae44dc8b20256a379160052ad" @@ -13441,6 +13522,13 @@ qs@6.11.0, qs@^6.5.2, qs@^6.9.4: dependencies: side-channel "^1.0.4" +qs@^6.10.3: + version "6.12.1" + resolved "https://registry.yarnpkg.com/qs/-/qs-6.12.1.tgz#39422111ca7cbdb70425541cba20c7d7b216599a" + integrity sha512-zWmv4RSuB9r2mYQw3zxQuHWeU+42aKi1wWig/j4ele4ygELZ7PEO6MM7rim9oAQH2A5MWfsAVf/jPvTPgCbvUQ== + dependencies: + side-channel "^1.0.6" + qs@~6.5.2: version "6.5.3" resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.3.tgz#3aeeffc91967ef6e35c0e488ef46fb296ab76aad" @@ -14406,6 +14494,11 @@ serve-static@1.15.0: parseurl "~1.3.3" send "0.18.0" +server-only@^0.0.1: + version "0.0.1" + resolved "https://registry.yarnpkg.com/server-only/-/server-only-0.0.1.tgz#0f366bb6afb618c37c9255a314535dc412cd1c9e" + integrity sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA== + set-blocking@^2.0.0, set-blocking@~2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7" @@ -16253,6 +16346,16 @@ wcwidth@^1.0.0: dependencies: defaults "^1.0.3" +web-streams-polyfill@4.0.0-beta.3: + version "4.0.0-beta.3" + resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-4.0.0-beta.3.tgz#2898486b74f5156095e473efe989dcf185047a38" + integrity sha512-QW95TCTaHmsYfHDybGMwO5IJIM93I/6vTRk+daHTWFPhwh+C8Cg7j7XyKrwrj8Ib6vYXe0ocYNrmzY4xAAN6ug== + +web-streams-polyfill@^3.2.1: + version "3.3.3" + resolved "https://registry.yarnpkg.com/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz#2073b91a2fdb1fbfbd401e7de0ac9f8214cecb4b" + integrity sha512-d2JWLCivmZYTSIoge9MsgFCZrt571BikcWGYkjC1khllbTeDlGqZ2D8vD8E/lJa8WGWbb7Plm8/XJYV7IJHZZw== + web-vitals@^2.1.4: version "2.1.4" resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-2.1.4.tgz#76563175a475a5e835264d373704f9dde718290c" From 84ec11bf0693706c56e0b919b356c448737851cf Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Tue, 30 Jul 2024 10:14:13 -0500 Subject: [PATCH 2/4] Update rsc.tsx --- packages/mux-uploader-react/src/rsc.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/mux-uploader-react/src/rsc.tsx b/packages/mux-uploader-react/src/rsc.tsx index df50e9376..1503de693 100644 --- a/packages/mux-uploader-react/src/rsc.tsx +++ b/packages/mux-uploader-react/src/rsc.tsx @@ -8,6 +8,7 @@ import MuxUploaderClient, { MuxUploaderFileSelect, MuxUploaderProgress, MuxUploaderRetry, + MuxUploaderPause, MuxUploaderStatus, } from './index'; import type { MuxUploaderRefAttributes, MuxUploaderProps } from './index'; @@ -68,6 +69,13 @@ const MuxUploader = React.forwardRef Date: Tue, 30 Jul 2024 13:50:21 -0500 Subject: [PATCH 3/4] Fix page link --- examples/nextjs-with-typescript/pages/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/nextjs-with-typescript/pages/index.tsx b/examples/nextjs-with-typescript/pages/index.tsx index f518588bc..00034b4fe 100644 --- a/examples/nextjs-with-typescript/pages/index.tsx +++ b/examples/nextjs-with-typescript/pages/index.tsx @@ -20,6 +20,7 @@ function HomePage() {
  • <><MuxPlayer>
    (lazy + @mux/blurup)
  • <><MuxUploader>
  • <><MuxUploader> (Separate Components)
    • +
  • <><MuxUploader> (Server Component)
  • <><mux-video>
    (Web Component)
  • <><mux-audio>
    (Web Component)
  • <><mux-player>
    (Web Component)
    • From edae36f9ba19f224032ba45a1cc671f2a4dadf02 Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Tue, 30 Jul 2024 13:50:29 -0500 Subject: [PATCH 4/4] just some comments --- packages/mux-uploader-react/src/rsc.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/mux-uploader-react/src/rsc.tsx b/packages/mux-uploader-react/src/rsc.tsx index 1503de693..cdc878fc3 100644 --- a/packages/mux-uploader-react/src/rsc.tsx +++ b/packages/mux-uploader-react/src/rsc.tsx @@ -27,9 +27,9 @@ Here's the original error thrown by @mux/mux-node -- ${error}`; // as our default export, the server component. interface MuxUploaderServerProps extends MuxUploaderProps { - clientOptions?: ClientOptions; - uploadCreateParams?: Partial; - uploadRequestOptions?: Partial; + clientOptions?: ClientOptions; // allows you to configure the @mux/mux-node client + uploadCreateParams?: Partial; // allows you to configure the direct upload + uploadRequestOptions?: Partial; // allows you to configure the direct upload request } const MuxUploader = React.forwardRef( /* @ts-expect-error our version of react/typescript doesn't yet support async components */