@epic-web/workshop-app 4.5.0 → 4.5.1

package/node_modules/framer-motion/dist/index.d.ts

@@ -1365,6 +1365,7 @@ interface IProjectionNode<I = unknown> {
     setAnimationOrigin(delta: Delta): void;
     startAnimation(transition: Transition$1): void;
     finishAnimation(): void;
+    hasCheckedOptimisedAppear: boolean;
     isLead(): boolean;
     promote(options?: {
         needsReset?: boolean;
@@ -4203,7 +4204,7 @@ declare class GroupPlaybackControls implements AnimationPlaybackControls {
     private runAll;
     play(): void;
     pause(): void;
-    stop(): void;
+    stop: () => void;
     cancel(): void;
     complete(): void;
 }

package/node_modules/framer-motion/dist/projection.dev.js

@@ -1013,7 +1013,7 @@
              * This will be replaced by the build step with the latest version number.
              * When MotionValues are provided to motion components, warn if versions are mixed.
              */
-            this.version = "11.2.6";
+            this.version = "11.2.9";
             /**
              * Tracks whether this value can output a velocity. Currently this is only true
              * if the value is numerical, but we might be able to widen the scope here and support
@@ -1309,6 +1309,21 @@
 
     const visualElementStore = new WeakMap();
 
+    function observeTimeline(update, timeline) {
+        let prevProgress;
+        const onFrame = () => {
+            const { currentTime } = timeline;
+            const percentage = currentTime === null ? 0 : currentTime.value;
+            const progress = percentage / 100;
+            if (prevProgress !== progress) {
+                update(progress);
+            }
+            prevProgress = progress;
+        };
+        frame.update(onFrame, true);
+        return () => cancelFrame(onFrame);
+    }
+
     function memo(callback) {
         let result;
         return () => {
@@ -1318,6 +1333,84 @@
         };
     }
 
+    const supportsScrollTimeline = memo(() => window.ScrollTimeline !== undefined);
+
+    class GroupPlaybackControls {
+        constructor(animations) {
+            // Bound to accomodate common `return animation.stop` pattern
+            this.stop = () => this.runAll("stop");
+            this.animations = animations.filter(Boolean);
+        }
+        then(onResolve, onReject) {
+            return Promise.all(this.animations).then(onResolve).catch(onReject);
+        }
+        /**
+         * TODO: Filter out cancelled or stopped animations before returning
+         */
+        getAll(propName) {
+            return this.animations[0][propName];
+        }
+        setAll(propName, newValue) {
+            for (let i = 0; i < this.animations.length; i++) {
+                this.animations[i][propName] = newValue;
+            }
+        }
+        attachTimeline(timeline) {
+            const cancelAll = this.animations.map((animation) => {
+                if (supportsScrollTimeline() && animation.attachTimeline) {
+                    animation.attachTimeline(timeline);
+                }
+                else {
+                    animation.pause();
+                    return observeTimeline((progress) => {
+                        animation.time = animation.duration * progress;
+                    }, timeline);
+                }
+            });
+            return () => {
+                cancelAll.forEach((cancelTimeline, i) => {
+                    if (cancelTimeline)
+                        cancelTimeline();
+                    this.animations[i].stop();
+                });
+            };
+        }
+        get time() {
+            return this.getAll("time");
+        }
+        set time(time) {
+            this.setAll("time", time);
+        }
+        get speed() {
+            return this.getAll("speed");
+        }
+        set speed(speed) {
+            this.setAll("speed", speed);
+        }
+        get duration() {
+            let max = 0;
+            for (let i = 0; i < this.animations.length; i++) {
+                max = Math.max(max, this.animations[i].duration);
+            }
+            return max;
+        }
+        runAll(methodName) {
+            this.animations.forEach((controls) => controls[methodName]());
+        }
+        play() {
+            this.runAll("play");
+        }
+        pause() {
+            this.runAll("pause");
+        }
+        cancel() {
+            this.runAll("cancel");
+        }
+        complete() {
+            this.runAll("complete");
+        }
+    }
+
     /**
      * Generate a list of every possible transform key.
      */
@@ -2110,14 +2203,17 @@
              * If any keyframe is a CSS variable, we need to find its value by sampling the element
              */
             for (let i = 0; i < unresolvedKeyframes.length; i++) {
-                const keyframe = unresolvedKeyframes[i];
-                if (typeof keyframe === "string" && isCSSVariableToken(keyframe)) {
-                    const resolved = getVariableValue(keyframe, element.current);
-                    if (resolved !== undefined) {
-                        unresolvedKeyframes[i] = resolved;
-                    }
-                    if (i === unresolvedKeyframes.length - 1) {
-                        this.finalKeyframe = keyframe;
+                let keyframe = unresolvedKeyframes[i];
+                if (typeof keyframe === "string") {
+                    keyframe = keyframe.trim();
+                    if (isCSSVariableToken(keyframe)) {
+                        const resolved = getVariableValue(keyframe, element.current);
+                        if (resolved !== undefined) {
+                            unresolvedKeyframes[i] = resolved;
+                        }
+                        if (i === unresolvedKeyframes.length - 1) {
+                            this.finalKeyframe = keyframe;
+                        }
                     }
                 }
             }
@@ -3882,7 +3978,9 @@
                     options.onUpdate(finalKeyframe);
                     options.onComplete();
                 });
-                return;
+                // We still want to return some animation controls here rather
+                // than returning undefined
+                return new GroupPlaybackControls([]);
             }
         }
         /**
@@ -3937,6 +4035,18 @@
         return definition;
     }
 
+    /**
+     * Convert camelCase to dash-case properties.
+     */
+    const camelToDash = (str) => str.replace(/([a-z])([A-Z])/gu, "$1-$2").toLowerCase();
+
+    const optimizedAppearDataId = "framerAppearId";
+    const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
+
+    function getOptimisedAppearId(visualElement) {
+        return visualElement.getProps()[optimizedAppearDataAttribute];
+    }
+
     function isSVGElement(element) {
         return element instanceof SVGElement && element.tagName !== "svg";
     }
@@ -4042,7 +4152,7 @@
                  * and warn against mismatches.
                  */
                 {
-                    warnOnce(nextValue.version === "11.2.6", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.6 may not work as expected.`);
+                    warnOnce(nextValue.version === "11.2.9", `Attempting to mix Framer Motion versions ${nextValue.version} with 11.2.9 may not work as expected.`);
                 }
             }
             else if (isMotionValue(prevValue)) {
@@ -4904,6 +5014,25 @@
             }
         }
     }
+    function isOptimisedAppearTree(projectionNode) {
+        projectionNode.hasCheckedOptimisedAppear = true;
+        if (projectionNode.root === projectionNode)
+            return false;
+        const { visualElement } = projectionNode.options;
+        if (!visualElement) {
+            return false;
+        }
+        else if (getOptimisedAppearId(visualElement)) {
+            return true;
+        }
+        else if (projectionNode.parent &&
+            !projectionNode.parent.hasCheckedOptimisedAppear) {
+            return isOptimisedAppearTree(projectionNode.parent);
+        }
+        else {
+            return false;
+        }
+    }
     function createProjectionNode({ attachResizeListener, defaultParent, measureScroll, checkIsScrollRoot, resetTransform, }) {
         return class ProjectionNode {
             constructor(latestValues = {}, parent = defaultParent === null || defaultParent === void 0 ? void 0 : defaultParent()) {
@@ -4979,6 +5108,13 @@
                  * Flags whether this node should have its transform reset prior to measuring.
                  */
                 this.shouldResetTransform = false;
+                /**
+                 * Store whether this node has been checked for optimised appear animations. As
+                 * effects fire bottom-up, and we want to look up the tree for appear animations,
+                 * this makes sure we only check each path once, stopping at nodes that
+                 * have already been checked.
+                 */
+                this.hasCheckedOptimisedAppear = false;
                 /**
                  * An object representing the calculated contextual/accumulated/tree scale.
                  * This will be used to scale calculcated projection transforms, as these are
@@ -5184,15 +5320,6 @@
                 if (this.isUpdateBlocked())
                     return;
                 this.isUpdating = true;
-                /**
-                 * If we're running optimised appear animations then these must be
-                 * cancelled before measuring the DOM. This is so we can measure
-                 * the true layout of the element rather than the WAAPI animation
-                 * which will be unaffected by the resetSkewAndRotate step.
-                 */
-                if (window.HandoffCancelAllAnimations) {
-                    window.HandoffCancelAllAnimations();
-                }
                 this.nodes && this.nodes.forEach(resetSkewAndRotation);
                 this.animationId++;
             }
@@ -5206,6 +5333,22 @@
                     this.options.onExitComplete && this.options.onExitComplete();
                     return;
                 }
+                /**
+                 * If we're running optimised appear animations then these must be
+                 * cancelled before measuring the DOM. This is so we can measure
+                 * the true layout of the element rather than the WAAPI animation
+                 * which will be unaffected by the resetSkewAndRotate step.
+                 *
+                 * Note: This is a DOM write. Worst case scenario is this is sandwiched
+                 * between other snapshot reads which will cause unnecessary style recalculations.
+                 * This has to happen here though, as we don't yet know which nodes will need
+                 * snapshots in startUpdate(), but we only want to cancel optimised animations
+                 * if a layout animation measurement is actually going to be affected by them.
+                 */
+                if (window.HandoffCancelAllAnimations &&
+                    isOptimisedAppearTree(this)) {
+                    window.HandoffCancelAllAnimations();
+                }
                 !this.root.isUpdating && this.root.startUpdate();
                 if (this.isLayoutDirty)
                     return;

package/node_modules/framer-motion/dist/three-entry.d.ts

@@ -1081,6 +1081,7 @@ interface IProjectionNode<I = unknown> {
     setAnimationOrigin(delta: Delta): void;
     startAnimation(transition: Transition$1): void;
     finishAnimation(): void;
+    hasCheckedOptimisedAppear: boolean;
     isLead(): boolean;
     promote(options?: {
         needsReset?: boolean;

package/node_modules/framer-motion/package.json

@@ -1,6 +1,6 @@
 {
     "name": "framer-motion",
-    "version": "11.2.6",
+    "version": "11.2.9",
     "description": "A simple and powerful JavaScript animation library",
     "main": "dist/cjs/index.js",
     "module": "dist/es/index.mjs",
@@ -87,7 +87,7 @@
     "bundlesize": [
         {
             "path": "./dist/size-rollup-motion.js",
-            "maxSize": "32.83 kB"
+            "maxSize": "33.3 kB"
         },
         {
             "path": "./dist/size-rollup-m.js",
@@ -95,15 +95,15 @@
         },
         {
             "path": "./dist/size-rollup-dom-animation.js",
-            "maxSize": "16.6 kB"
+            "maxSize": "16.85 kB"
         },
         {
             "path": "./dist/size-rollup-dom-max.js",
-            "maxSize": "28.2 kB"
+            "maxSize": "28.6 kB"
         },
         {
             "path": "./dist/size-rollup-animate.js",
-            "maxSize": "17.83 kB"
+            "maxSize": "17.85 kB"
         },
         {
             "path": "./dist/size-webpack-m.js",
@@ -111,12 +111,12 @@
         },
         {
             "path": "./dist/size-webpack-dom-animation.js",
-            "maxSize": "21.7 kB"
+            "maxSize": "21.9 kB"
         },
         {
             "path": "./dist/size-webpack-dom-max.js",
-            "maxSize": "34.1 kB"
+            "maxSize": "34.6 kB"
         }
     ],
-    "gitHead": "9f5a5da4d09fbc34889c19b0af4a04fb2b17a2e5"
+    "gitHead": "a58d3e7db0a52d3e1747924b1d09e895731e891e"
 }

package/node_modules/remix-utils/node_modules/type-fest/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "type-fest",
-	"version": "4.18.2",
+	"version": "4.18.3",
 	"description": "A collection of essential TypeScript types",
 	"license": "(MIT OR CC0-1.0)",
 	"repository": "sindresorhus/type-fest",

package/node_modules/remix-utils/node_modules/type-fest/source/conditional-keys.d.ts

@@ -1,3 +1,5 @@
+import type {IfNever} from './if-never';
+
 /**
 Extract the keys from a type where the value type of the key extends the given `Condition`.
 
@@ -36,10 +38,10 @@ export type ConditionalKeys<Base, Condition> =
 	[Key in keyof Base]-?:
 	// Pick only keys with types extending the given `Condition` type.
 	Base[Key] extends Condition
-	// Retain this key since the condition passes.
-		? Key
+	// Retain this key
+	// If the value for the key extends never, only include it if `Condition` also extends never
+		? IfNever<Base[Key], IfNever<Condition, Key, never>, Key>
 	// Discard this key since the condition fails.
 		: never;
-
 	// Convert the produced object into a union type of the keys which passed the conditional test.
 }[keyof Base];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epic-web/workshop-app",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,9 @@
   ],
   "type": "module",
   "imports": {
-    "#*": "./*"
+    "#app/*": "./app/*",
+    "#tests/*": "./tests/*",
+    "#build/*": "./build/*"
   },
   "exports": {
     "./start": {
@@ -42,8 +44,8 @@
     "@epic-web/invariant": "^1.0.0",
     "@epic-web/remember": "^1.0.2",
     "@epic-web/restore-scroll": "^1.1.1",
-    "@epic-web/workshop-presence": "4.5.0",
-    "@epic-web/workshop-utils": "4.5.0",
+    "@epic-web/workshop-presence": "4.5.1",
+    "@epic-web/workshop-utils": "4.5.1",
     "@mdx-js/mdx": "^3.0.1",
     "@mux/mux-player-react": "^2.6.0",
     "@paralleldrive/cuid2": "^2.2.2",
@@ -127,7 +129,6 @@
     "@total-typescript/ts-reset": "^0.5.1",
     "@types/compression": "^1.7.5",
     "@types/cross-spawn": "^6.0.6",
-    "@types/eslint": "^8.56.10",
     "@types/etag": "^1.8.3",
     "@types/express": "^4.17.21",
     "@types/fs-extra": "^11.0.4",
@@ -145,7 +146,7 @@
     "@types/wait-on": "^5.3.4",
     "@types/ws": "^8.5.10",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
+    "eslint": "^9.3.0",
     "mdast-util-mdx-jsx": "^3.1.2",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.2.5",

package/start.js

@@ -15,8 +15,10 @@ try {
 			'utf8',
 		),
 	)
-} catch (error) {
-	throw new Error(`Could not find package.json at ${EPICSHOP_CONTEXT_CWD}`)
+} catch {
+	throw new Error(
+		`Could not find and parse package.json at ${EPICSHOP_CONTEXT_CWD}`,
+	)
 }
 
 if (packageJson.epicshop.githubRoot) {

package/build/client/assets/_exerciseNumber-D6YNCQoj.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_exerciseNumber-D6YNCQoj.js","sources":["../../../app/routes/_app+/_exercises+/$exerciseNumber.tsx"],"sourcesContent":["import path from 'path'\nimport { invariantResponse } from '@epic-web/invariant'\nimport { ElementScrollRestoration } from '@epic-web/restore-scroll'\nimport {\n\tgetExercises,\n\tgetWorkshopRoot,\n\tgetWorkshopTitle,\n} from '@epic-web/workshop-utils/apps.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n\ttime,\n} from '@epic-web/workshop-utils/timing.server'\nimport {\n\ttype LoaderFunctionArgs,\n\ttype HeadersFunction,\n\ttype MetaFunction,\n\tdefer,\n} from '@remix-run/node'\nimport {\n\tLink,\n\tisRouteErrorResponse,\n\tuseLoaderData,\n\tuseRouteError,\n} from '@remix-run/react'\nimport slugify from '@sindresorhus/slugify'\nimport { EpicVideoInfoProvider } from '#app/components/epic-video.tsx'\nimport { type loader as rootLoader } from '#app/root.tsx'\nimport { EditFileOnGitHub } from '#app/routes/launch-editor.tsx'\nimport { ProgressToggle } from '#app/routes/progress.tsx'\nimport { getEpicVideoInfos } from '#app/utils/epic-api.ts'\nimport { Mdx } from '#app/utils/mdx.tsx'\nimport { getErrorMessage } from '#app/utils/misc.tsx'\n\nexport const meta: MetaFunction<typeof loader, { root: typeof rootLoader }> = ({\n\tdata,\n\tmatches,\n}) => {\n\tif (!data) {\n\t\treturn [{ title: '📝 | Error' }]\n\t}\n\tconst number = data.exercise.exerciseNumber.toString().padStart(2, '0')\n\t// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n\tconst rootData = matches.find(m => m.id === 'root')?.data\n\treturn [\n\t\t{\n\t\t\ttitle: `📝 | ${number}. ${data.exercise.title} | ${rootData?.workshopTitle}`,\n\t\t},\n\t]\n}\n\nexport async function loader({ request, params }: LoaderFunctionArgs) {\n\tconst timings = makeTimings('exerciseNumberLoader')\n\tinvariantResponse(params.exerciseNumber, 'exerciseNumber is required')\n\tconst [exercises, workshopTitle] = await Promise.all([\n\t\ttime(() => getExercises({ request, timings }), {\n\t\t\ttimings,\n\t\t\ttype: 'getExercises',\n\t\t\tdesc: 'getExercises in $exerciseNumber.tsx',\n\t\t}),\n\t\ttime(() => getWorkshopTitle(), {\n\t\t\ttimings,\n\t\t\ttype: 'getWorkshopTitle',\n\t\t\tdesc: 'getWorkshopTitle in $exerciseNumber.tsx',\n\t\t}),\n\t])\n\tconst exercise = exercises.find(\n\t\te => e.exerciseNumber === Number(params.exerciseNumber),\n\t)\n\tif (!exercise) {\n\t\tthrow new Response('Not found', { status: 404 })\n\t}\n\n\tconst readmeFilepath = path.join(\n\t\tgetWorkshopRoot(),\n\t\t'exercises',\n\t\texercise.dirName,\n\t\t'README.mdx',\n\t)\n\n\tconst firstStep = exercise.steps.find(Boolean)\n\n\tconst articleId = `workshop-${slugify(workshopTitle)}-${\n\t\texercise.exerciseNumber\n\t}-instructions`\n\n\treturn defer(\n\t\t{\n\t\t\tarticleId,\n\t\t\texercise,\n\t\t\texerciseNumber: exercise.exerciseNumber,\n\t\t\texerciseReadme: {\n\t\t\t\tfile: readmeFilepath,\n\t\t\t\trelativePath: `exercises/${exercise.dirName}`,\n\t\t\t},\n\t\t\texerciseTitle: exercise.title,\n\t\t\tfirstStep,\n\t\t\tfirstType: firstStep?.problem ? 'problem' : 'solution',\n\t\t\ttitle: workshopTitle,\n\t\t\tepicVideoInfosPromise: getEpicVideoInfos(\n\t\t\t\texercise.instructionsEpicVideoEmbeds,\n\t\t\t\t{ request },\n\t\t\t),\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\nconst mdxComponents = { h1: () => null }\nexport default function ExerciseNumberRoute() {\n\tconst data = useLoaderData<typeof loader>()\n\n\tconst firstStepNumber = String(data.firstStep?.stepNumber ?? '01')\n\tconst firstStepPath = `${firstStepNumber.padStart(2, '0')}/${data.firstType}`\n\treturn (\n\t\t<main className=\"relative flex h-full w-full max-w-5xl flex-col justify-between border-r md:w-3/4 xl:w-2/3\">\n\t\t\t<article\n\t\t\t\tid={data.articleId}\n\t\t\t\tkey={data.articleId}\n\t\t\t\tclassName=\"shadow-on-scrollbox flex w-full flex-1 flex-col gap-12 overflow-y-scroll px-3 py-4 pt-6 scrollbar-thin scrollbar-thumb-scrollbar md:px-10 md:py-12 md:pt-16\"\n\t\t\t>\n\t\t\t\t<div>\n\t\t\t\t\t<h1 className=\"text-[clamp(3rem,6vw,8.5rem)] font-extrabold leading-none\">\n\t\t\t\t\t\t{data.exercise.title}\n\t\t\t\t\t</h1>\n\t\t\t\t</div>\n\t\t\t\t<div>\n\t\t\t\t\t{data.exercise.instructionsCode ? (\n\t\t\t\t\t\t<EpicVideoInfoProvider\n\t\t\t\t\t\t\tepicVideoInfosPromise={data.epicVideoInfosPromise}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div className=\"prose dark:prose-invert sm:prose-lg\">\n\t\t\t\t\t\t\t\t<Mdx\n\t\t\t\t\t\t\t\t\tcode={data.exercise.instructionsCode}\n\t\t\t\t\t\t\t\t\tcomponents={mdxComponents}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</EpicVideoInfoProvider>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t'No instructions yet...'\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\t\t\t</article>\n\t\t\t<ElementScrollRestoration\n\t\t\t\telementQuery={`#${data.articleId}`}\n\t\t\t\tkey={`scroll-${data.articleId}`}\n\t\t\t/>\n\t\t\t<ProgressToggle\n\t\t\t\ttype=\"instructions\"\n\t\t\t\texerciseNumber={data.exerciseNumber}\n\t\t\t\tclassName=\"h-14 border-t px-6\"\n\t\t\t/>\n\t\t\t<div className=\"flex h-16 justify-between border-b-4 border-t lg:border-b-0\">\n\t\t\t\t<div />\n\t\t\t\t<EditFileOnGitHub\n\t\t\t\t\tfile={data.exerciseReadme.file}\n\t\t\t\t\trelativePath={data.exerciseReadme.relativePath}\n\t\t\t\t/>\n\t\t\t\t<Link\n\t\t\t\t\tto={firstStepPath}\n\t\t\t\t\tprefetch=\"intent\"\n\t\t\t\t\tclassName=\"flex h-full items-center justify-center bg-foreground px-7 text-background\"\n\t\t\t\t>\n\t\t\t\t\tStart Learning\n\t\t\t\t</Link>\n\t\t\t</div>\n\t\t</main>\n\t)\n}\n\nexport function ErrorBoundary() {\n\tconst error = useRouteError()\n\n\tif (typeof document !== 'undefined') {\n\t\tconsole.error(error)\n\t}\n\n\treturn isRouteErrorResponse(error) ? (\n\t\terror.status === 404 ? (\n\t\t\t<p>Sorry, we couldn't find that step.</p>\n\t\t) : (\n\t\t\t<p>\n\t\t\t\t{error.status} {error.data}\n\t\t\t</p>\n\t\t)\n\t) : (\n\t\t<p>{getErrorMessage(error)}</p>\n\t)\n}\n"],"names":["meta","data","matches","title","number","exercise","exerciseNumber","toString","padStart","rootData","find","m","id","workshopTitle","mdxComponents","h1","ExerciseNumberRoute","useLoaderData","firstStepPath","String","firstStep","stepNumber","firstType","jsxs","className","children","articleId","jsx","instructionsCode","EpicVideoInfoProvider","epicVideoInfosPromise","Mdx","code","components","ElementScrollRestoration","elementQuery","ProgressToggle","type","EditFileOnGitHub","file","exerciseReadme","relativePath","Link","to","prefetch","ErrorBoundary","error","useRouteError","document","console","isRouteErrorResponse","status","getErrorMessage"],"mappings":"0hBAmCO,MAAMA,EAAiEA,CAAC,CAC9EC,KAAAA,EACAC,QAAAA,CACD,IAAM,OACL,GAAI,CAACD,EACJ,MAAO,CAAC,CAAEE,MAAO,YAAa,CAAC,EAE1B,MAAAC,EAASH,EAAKI,SAASC,eAAeC,WAAWC,SAAS,EAAG,GAAG,EAEhEC,GAAWP,EAAAA,EAAQQ,QAAUC,EAAEC,KAAO,MAAM,IAAjCV,YAAAA,EAAoCD,KAC9C,MAAA,CACN,CACCE,cAAeC,CAAM,KAAKH,EAAKI,SAASF,KAAW,MAAAM,GAAAA,YAAAA,EAAUI,aAAa,EAC3E,CAAA,CAEF,EAuEMC,EAAgB,CAAEC,GAAIA,IAAM,IAAK,EACvC,SAAwBC,GAAsB,OAC7C,MAAMf,EAAOgB,IAGPC,KADkBC,SAAOlB,EAAAA,EAAKmB,YAALnB,YAAAA,EAAgBoB,aAAc,IAAI,EACxBb,SAAS,EAAG,GAAG,CAAK,IAAAP,EAAKqB,SAAS,GAE1E,OAAAC,EAAAA,KAAC,OAAK,CAAAC,UAAU,4FACfC,SAAA,CAAAF,EAAA,KAAC,UAAA,CACAX,GAAIX,EAAKyB,UAETF,UAAU,8JAEVC,SAAA,CAACE,EAAA,IAAA,MAAA,CACAF,eAAC,KAAG,CAAAD,UAAU,4DACZC,SAAKxB,EAAAI,SAASF,MAChB,CACD,CAAA,EACCwB,EAAA,IAAA,MAAA,CACCF,SAAKxB,EAAAI,SAASuB,iBACdD,EAAAA,IAACE,EAAA,CACAC,sBAAuB7B,EAAK6B,sBAE5BL,SAAAE,EAAA,IAAC,MAAI,CAAAH,UAAU,sCACdC,SAAAE,EAAA,IAACI,EAAA,CACAC,KAAM/B,EAAKI,SAASuB,iBACpBK,WAAYnB,EACb,EACD,CACD,CAAA,EAEA,wBAEF,CAAA,CAAA,CAAA,EAvBKb,EAAKyB,SAwBX,EACAC,EAAAA,IAACO,EAAA,CACAC,aAAkB,IAAAlC,EAAKyB,SAAS,EAAA,EAC3B,UAAUzB,EAAKyB,SAAS,EAC9B,EACAC,EAAA,IAACS,EAAA,CACAC,KAAK,eACL/B,eAAgBL,EAAKK,eACrBkB,UAAU,oBAAA,CACX,EACAD,EAAA,KAAC,MAAI,CAAAC,UAAU,8DACdC,SAAA,CAAAE,EAAAA,IAAC,MAAI,CAAA,CAAA,EACLA,EAAA,IAACW,EAAA,CACAC,KAAMtC,EAAKuC,eAAeD,KAC1BE,aAAcxC,EAAKuC,eAAeC,YAAA,CACnC,EACAd,EAAA,IAACe,EAAA,CACAC,GAAIzB,EACJ0B,SAAS,SACTpB,UAAU,6EACVC,SAAA,gBAAA,CAED,CAAA,CACD,CAAA,CAAA,CACD,CAAA,CAEF,CAEO,SAASoB,GAAgB,CAC/B,MAAMC,EAAQC,IAEV,OAAA,OAAOC,SAAa,KACvBC,QAAQH,MAAMA,CAAK,EAGbI,EAAqBJ,CAAK,EAChCA,EAAMK,SAAW,IAChBxB,EAAA,IAAC,IAAE,CAAAF,SAAA,oCAAA,CAAkC,EAErCF,EAAA,KAAC,IACC,CAAAE,SAAA,CAAMqB,EAAAK,OAAO,IAAEL,EAAM7C,IAAA,CAAA,CACvB,EAGD0B,EAAA,IAAC,IAAG,CAAAF,SAAA2B,EAAgBN,CAAK,CAAE,CAAA,CAE7B"}

package/build/client/assets/_exerciseNumber_.finished-DR3gQ1pK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_exerciseNumber_.finished-DR3gQ1pK.js","sources":["../../../app/routes/_app+/_exercises+/$exerciseNumber_.finished.tsx"],"sourcesContent":["import path from 'path'\nimport { invariantResponse } from '@epic-web/invariant'\nimport { ElementScrollRestoration } from '@epic-web/restore-scroll'\nimport {\n\tgetAppPageRoute,\n\tgetApps,\n\tgetExercise,\n\tgetWorkshopRoot,\n\tgetWorkshopTitle,\n\tisExerciseStepApp,\n} from '@epic-web/workshop-utils/apps.server'\nimport {\n\tcombineServerTimings,\n\tgetServerTimeHeader,\n\tmakeTimings,\n} from '@epic-web/workshop-utils/timing.server'\nimport { getPkgProp } from '@epic-web/workshop-utils/utils.server'\nimport {\n\ttype LoaderFunctionArgs,\n\ttype HeadersFunction,\n\ttype MetaFunction,\n\tdefer,\n} from '@remix-run/node'\nimport { Link, useLoaderData } from '@remix-run/react'\nimport slugify from '@sindresorhus/slugify'\nimport * as React from 'react'\nimport { EpicVideoInfoProvider } from '#app/components/epic-video.tsx'\nimport { Loading } from '#app/components/loading.tsx'\nimport { NavChevrons } from '#app/components/nav-chevrons.tsx'\nimport { type loader as rootLoader } from '#app/root.tsx'\nimport { EditFileOnGitHub } from '#app/routes/launch-editor.tsx'\nimport { ProgressToggle } from '#app/routes/progress.tsx'\nimport { getEpicVideoInfos } from '#app/utils/epic-api.ts'\nimport { Mdx } from '#app/utils/mdx.tsx'\nimport { cn } from '#app/utils/misc.tsx'\n\nexport const meta: MetaFunction<typeof loader, { root: typeof rootLoader }> = ({\n\tdata,\n\tmatches,\n}) => {\n\tif (!data) {\n\t\treturn [{ title: '🦉 | Error' }]\n\t}\n\tconst number = data.exercise.exerciseNumber.toString().padStart(2, '0')\n\t// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n\tconst rootData = matches.find(m => m.id === 'root')?.data\n\treturn [\n\t\t{\n\t\t\ttitle: `🦉 | ${number}. ${data.exercise.title} | ${rootData?.workshopTitle}`,\n\t\t},\n\t]\n}\n\nexport async function loader({ request, params }: LoaderFunctionArgs) {\n\tconst timings = makeTimings('exerciseFinishedLoader')\n\tinvariantResponse(params.exerciseNumber, 'exerciseNumber is required')\n\tconst exercise = await getExercise(params.exerciseNumber, {\n\t\ttimings,\n\t\trequest,\n\t})\n\tif (!exercise) {\n\t\tthrow new Response('Not found', { status: 404 })\n\t}\n\tconst workshopTitle = await getWorkshopTitle()\n\tconst workshopRoot = getWorkshopRoot()\n\tconst exerciseFormTemplate = await getPkgProp(\n\t\tworkshopRoot,\n\t\t'epicshop.forms.exercise',\n\t\t`https://docs.google.com/forms/d/e/1FAIpQLSf3o9xyjQepTlOTH5Z7ZwkeSTdXh6YWI_RGc9KiyD3oUN0p6w/viewform?hl=en&embedded=true&entry.1836176234={workshopTitle}&entry.428900931={exerciseTitle}`,\n\t)\n\tconst exerciseFormEmbedUrl = exerciseFormTemplate\n\t\t.replace('{workshopTitle}', encodeURIComponent(workshopTitle))\n\t\t.replace('{exerciseTitle}', encodeURIComponent(exercise.title))\n\tconst nextExercise = await getExercise(exercise.exerciseNumber + 1, {\n\t\ttimings,\n\t\trequest,\n\t})\n\n\tconst finishedFilepath = path.join(\n\t\tgetWorkshopRoot(),\n\t\t'exercises',\n\t\texercise.dirName,\n\t\t'FINISHED.mdx',\n\t)\n\n\tconst apps = await getApps({ request, timings })\n\tconst exerciseApps = apps\n\t\t.filter(isExerciseStepApp)\n\t\t.filter(app => app.exerciseNumber === exercise.exerciseNumber)\n\tconst prevApp = exerciseApps[exerciseApps.length - 1]\n\n\tconst articleId = `workshop-${slugify(workshopTitle)}-${\n\t\texercise.exerciseNumber\n\t}-finished`\n\n\treturn defer(\n\t\t{\n\t\t\tarticleId,\n\t\t\tworkshopTitle,\n\t\t\texercise,\n\t\t\texerciseFormEmbedUrl,\n\t\t\tepicVideoInfosPromise: getEpicVideoInfos(\n\t\t\t\texercise.finishedEpicVideoEmbeds,\n\t\t\t\t{ request },\n\t\t\t),\n\t\t\texerciseFinished: exercise.finishedCode\n\t\t\t\t? {\n\t\t\t\t\t\tfile: finishedFilepath,\n\t\t\t\t\t\trelativePath: `exercises/${exercise.dirName}/FINISHED.mdx`,\n\t\t\t\t\t}\n\t\t\t\t: null,\n\t\t\tprevStepLink: prevApp\n\t\t\t\t? {\n\t\t\t\t\t\tto: getAppPageRoute(prevApp),\n\t\t\t\t\t\t'aria-label': `${prevApp.title} (${prevApp.type})`,\n\t\t\t\t\t}\n\t\t\t\t: null,\n\t\t\tnextStepLink: nextExercise\n\t\t\t\t? {\n\t\t\t\t\t\tto: `/${nextExercise.exerciseNumber.toString().padStart(2, '0')}`,\n\t\t\t\t\t\t'aria-label': `${nextExercise.title}`,\n\t\t\t\t\t}\n\t\t\t\t: {\n\t\t\t\t\t\tto: '/finished',\n\t\t\t\t\t\t'aria-label': 'Finished! 🎉',\n\t\t\t\t\t},\n\t\t},\n\t\t{\n\t\t\theaders: {\n\t\t\t\t'Server-Timing': getServerTimeHeader(timings),\n\t\t\t},\n\t\t},\n\t)\n}\n\nexport const headers: HeadersFunction = ({ loaderHeaders, parentHeaders }) => {\n\tconst headers = {\n\t\t'Cache-Control': loaderHeaders.get('Cache-Control') ?? '',\n\t\t'Server-Timing': combineServerTimings(loaderHeaders, parentHeaders),\n\t}\n\treturn headers\n}\n\nconst mdxComponents = { h1: () => null }\nexport default function ExerciseFinished() {\n\tconst data = useLoaderData<typeof loader>()\n\tconst exerciseNumber = data.exercise.exerciseNumber\n\t\t.toString()\n\t\t.padStart(2, '0')\n\n\treturn (\n\t\t<div className=\"flex flex-grow flex-col\">\n\t\t\t<main className=\"grid h-full flex-grow grid-cols-1 grid-rows-2 lg:grid-cols-2 lg:grid-rows-1\">\n\t\t\t\t<div className=\"relative col-span-1 row-span-1 flex h-full flex-col lg:border-r\">\n\t\t\t\t\t<h1 className=\"h-14 border-b pl-10 pr-5 text-sm font-medium uppercase leading-none\">\n\t\t\t\t\t\t<div className=\"flex h-14 flex-wrap items-center justify-between gap-x-2 py-2\">\n\t\t\t\t\t\t\t<div className=\"flex items-center justify-start gap-x-2\">\n\t\t\t\t\t\t\t\t<Link to={`/${exerciseNumber}`} className=\"hover:underline\">\n\t\t\t\t\t\t\t\t\t{`${exerciseNumber}. ${data.exercise.title}`}\n\t\t\t\t\t\t\t\t</Link>\n\t\t\t\t\t\t\t\t<span>/</span>\n\t\t\t\t\t\t\t\t<span>Elaboration</span>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</h1>\n\n\t\t\t\t\t<article\n\t\t\t\t\t\tclassName=\"shadow-on-scrollbox h-full w-full max-w-none flex-1 scroll-pt-6 space-y-6 overflow-y-auto p-10 pt-8 scrollbar-thin scrollbar-thumb-scrollbar\"\n\t\t\t\t\t\tid={data.articleId}\n\t\t\t\t\t>\n\t\t\t\t\t\t{data.exercise.finishedCode ? (\n\t\t\t\t\t\t\t<EpicVideoInfoProvider\n\t\t\t\t\t\t\t\tepicVideoInfosPromise={data.epicVideoInfosPromise}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<div className=\"prose dark:prose-invert sm:prose-lg\">\n\t\t\t\t\t\t\t\t\t<Mdx\n\t\t\t\t\t\t\t\t\t\tcode={data.exercise.finishedCode}\n\t\t\t\t\t\t\t\t\t\tcomponents={mdxComponents}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</EpicVideoInfoProvider>\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t// TODO: render a random dad joke...\n\t\t\t\t\t\t\t'No finished instructions yet...'\n\t\t\t\t\t\t)}\n\t\t\t\t\t</article>\n\t\t\t\t\t<ElementScrollRestoration elementQuery={`#${data.articleId}`} />\n\t\t\t\t\t<ProgressToggle\n\t\t\t\t\t\ttype=\"finished\"\n\t\t\t\t\t\texerciseNumber={data.exercise.exerciseNumber}\n\t\t\t\t\t\tclassName=\"h-14 border-t px-6\"\n\t\t\t\t\t/>\n\t\t\t\t\t<div className=\"flex h-16 justify-between border-b-4 border-t lg:border-b-0\">\n\t\t\t\t\t\t<div />\n\t\t\t\t\t\t{data.exerciseFinished ? (\n\t\t\t\t\t\t\t<EditFileOnGitHub\n\t\t\t\t\t\t\t\tfile={data.exerciseFinished.file}\n\t\t\t\t\t\t\t\trelativePath={data.exerciseFinished.relativePath}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t<NavChevrons prev={data.prevStepLink} next={data.nextStepLink} />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t<Survey\n\t\t\t\t\texerciseFormEmbedUrl={data.exerciseFormEmbedUrl}\n\t\t\t\t\texerciseTitle={data.exercise.title}\n\t\t\t\t/>\n\t\t\t</main>\n\t\t</div>\n\t)\n}\n\nfunction Survey({\n\texerciseFormEmbedUrl,\n\texerciseTitle,\n}: {\n\texerciseFormEmbedUrl: string\n\texerciseTitle: string\n}) {\n\tconst [iframeLoaded, setIframeLoaded] = React.useState(false)\n\treturn (\n\t\t<div className=\"relative flex-shrink-0\">\n\t\t\t{!iframeLoaded ? (\n\t\t\t\t<div className=\"absolute inset-0 z-10 flex items-center justify-center\">\n\t\t\t\t\t<Loading>\n\t\t\t\t\t\t<span>Loading {exerciseTitle} Elaboration form</span>\n\t\t\t\t\t</Loading>\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t\t<iframe\n\t\t\t\tonLoad={() => setIframeLoaded(true)}\n\t\t\t\ttitle=\"Elaboration\"\n\t\t\t\tsrc={exerciseFormEmbedUrl}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t'absolute inset-0 flex h-full w-full transition-opacity duration-300',\n\t\t\t\t\tiframeLoaded ? 'opacity-100' : 'opacity-0',\n\t\t\t\t)}\n\t\t\t/>\n\t\t</div>\n\t)\n}\n"],"names":["meta","data","matches","title","number","exercise","exerciseNumber","toString","padStart","rootData","find","m","id","workshopTitle","mdxComponents","h1","ExerciseFinished","useLoaderData","className","children","jsxs","jsx","Link","to","articleId","finishedCode","EpicVideoInfoProvider","epicVideoInfosPromise","Mdx","code","components","ElementScrollRestoration","elementQuery","ProgressToggle","type","exerciseFinished","EditFileOnGitHub","file","relativePath","NavChevrons","prev","prevStepLink","next","nextStepLink","Survey","exerciseFormEmbedUrl","exerciseTitle","iframeLoaded","setIframeLoaded","React","Loading","onLoad","src","cn"],"mappings":"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"}