Redo the whole thing with a loader

docs/app/guides/custom-components/contexts/page.tsx

@@ -1,8 +1,5 @@
-import PizzaSlice from "guide-examples/custom/pizza-slice"
-import PizzaSliceSource from "!raw-loader!guide-examples/custom/pizza-slice"
-
-import PointCloud from "guide-examples/custom/point-cloud"
-import PointCloudSource from "!raw-loader!guide-examples/custom/point-cloud"
+import * as PizzaSlice from "guide-examples/custom/pizza-slice"
+import * as PointCloud from "guide-examples/custom/point-cloud"
 
 import CodeAndExample from "components/CodeAndExample"
 import Link from "next/link"
@@ -62,7 +59,7 @@ export default function TransformContextsPage() {
         transforms it.
       </p>
 
-      <CodeAndExample component={<PizzaSlice />} source={PizzaSliceSource} />
+      <CodeAndExample example={PizzaSlice} />
 
       <p>
         This is an example of a component that gets entirely transformed by the user and view
@@ -82,7 +79,7 @@ export default function TransformContextsPage() {
         the CSS transforms approach here, because that would distort each circle.
       </p>
 
-      <CodeAndExample component={<PointCloud />} source={PointCloudSource} />
+      <CodeAndExample example={PointCloud} />
     </>
   )
 }

docs/app/guides/display/circles/page.tsx

@@ -1,6 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import MovableCircle from "guide-examples/MovableCircle"
+import * as MovableCircle from "guide-examples/MovableCircle"
 import MovableCircleSource from "!raw-loader!guide-examples/MovableCircle"
 
 import { PropTable } from "components/PropTable"
@@ -10,7 +10,7 @@ export default function Page() {
     <>
       <p>Circles take a center vector and a radius.</p>
 
-      <CodeAndExample component={<MovableCircle />} source={MovableCircleSource} />
+      <CodeAndExample example={MovableCircle} />
 
       <PropTable of={"Circle"} />
     </>

docs/app/guides/display/coordinates/page.tsx

@@ -1,16 +1,11 @@
 import { PropTable } from "components/PropTable"
 import CodeAndExample from "components/CodeAndExample"
 
-import CartesianCoordinatesExample from "guide-examples/display/coordinates/CartesianCoordinatesExample"
-import CartesianCoordinatesExampleSource from "!raw-loader!guide-examples/display/coordinates/CartesianCoordinatesExample"
-
-import CartesianCoordinatesConfigExample from "guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
-import CartesianCoordinatesConfigExampleSource from "!raw-loader!guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
+import * as CartesianCoordinatesExample from "guide-examples/display/coordinates/CartesianCoordinatesExample"
+import * as CartesianCoordinatesConfigExample from "guide-examples/display/coordinates/CartesianCoordinatesConfigExample"
 import Code from "components/Code"
 
-import PolarCoordinatesExample from "guide-examples/display/coordinates/PolarCoordinatesExample"
-import PolarCoordinatesExampleSource from "!raw-loader!guide-examples/display/coordinates/PolarCoordinatesExample"
-
+import * as PolarCoordinatesExample from "guide-examples/display/coordinates/PolarCoordinatesExample"
 function CoordinatesPage() {
   return (
     <>
@@ -24,10 +19,7 @@ function CoordinatesPage() {
 
       <h2>Cartesian coordinates</h2>
 
-      <CodeAndExample
-        component={<CartesianCoordinatesExample />}
-        source={CartesianCoordinatesExampleSource}
-      />
+      <CodeAndExample example={CartesianCoordinatesExample} />
 
       <PropTable of={"Coordinates.Cartesian"} />
 
@@ -64,17 +56,11 @@ function CoordinatesPage() {
         <code>labels</code> to render in terms of π.
       </p>
 
-      <CodeAndExample
-        component={<CartesianCoordinatesConfigExample />}
-        source={CartesianCoordinatesConfigExampleSource}
-      />
+      <CodeAndExample example={CartesianCoordinatesConfigExample} />
 
       <h2>Polar coordinates</h2>
 
-      <CodeAndExample
-        component={<PolarCoordinatesExample />}
-        source={PolarCoordinatesExampleSource}
-      />
+      <CodeAndExample example={PolarCoordinatesExample} />
 
       <PropTable of={"Coordinates.Polar"} />
 

docs/app/guides/display/debug/page.tsx

@@ -4,12 +4,8 @@ import Link from "next/link"
 
 import CodeAndExample from "components/CodeAndExample"
 
-import PizzaSliceExample from "guide-examples/custom/pizza-slice"
-import PizzaSliceExampleSource from "!raw-loader!guide-examples/custom/pizza-slice"
-
-import Example from "guide-examples/debug/PaneVisualizerExample"
-import PaneVisualizerExampleSource from "!raw-loader!guide-examples/debug/PaneVisualizerExample"
-
+import * as PizzaSliceExample from "guide-examples/custom/pizza-slice"
+import * as Example from "guide-examples/debug/PaneVisualizerExample"
 export default function DebugPage() {
   return (
     <>
@@ -29,7 +25,7 @@ export default function DebugPage() {
         <Link href="/guides/custom-components/overview">custom components</Link>.
       </p>
 
-      <CodeAndExample component={<PizzaSliceExample />} source={PizzaSliceExampleSource} />
+      <CodeAndExample example={PizzaSliceExample} />
 
       <PropTable of={"Debug.TransformWidget"} />
 
@@ -41,7 +37,7 @@ export default function DebugPage() {
         pane context.
       </p>
 
-      <CodeAndExample component={<Example />} source={PaneVisualizerExampleSource} />
+      <CodeAndExample example={Example} />
 
       <PropTable of={"Debug.ViewportInfo"} />
     </>

docs/app/guides/display/ellipses/page.tsx

@@ -1,6 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import MovableEllipse from "guide-examples/MovableEllipse"
+import * as MovableEllipse from "guide-examples/MovableEllipse"
 import MovableEllipseSource from "!raw-loader!guide-examples/MovableEllipse"
 import WIP from "components/WIP"
 import Link from "next/link"
@@ -12,7 +12,7 @@ export default function Page() {
     <>
       <p>Ellipses take a center vector, radius vector, and an angle.</p>
 
-      <CodeAndExample component={<MovableEllipse />} source={MovableEllipseSource} />
+      <CodeAndExample example={MovableEllipse} />
 
       <PropTable of={"Ellipse"} />
 

docs/app/guides/display/lines/page.tsx

@@ -1,41 +1,33 @@
 import CodeAndExample from "components/CodeAndExample"
 import { PropTable } from "components/PropTable"
 
-import LineSegmentExample from "guide-examples/LineSegmentExample"
-import LineSegmentExampleSource from "!raw-loader!guide-examples/LineSegmentExample"
-import LineThroughPointsExample from "guide-examples/LineThroughPointsExample"
-import LineThroughPointsExampleSource from "!raw-loader!guide-examples/LineThroughPointsExample"
-import LinePointSlopeExample from "guide-examples/LinePointSlopeExample"
-import LinePointSlopeExampleSource from "!raw-loader!guide-examples/LinePointSlopeExample"
-import LinePointAngleExample from "guide-examples/LinePointAngleExample"
-import LinePointAngleExampleSource from "!raw-loader!guide-examples/LinePointAngleExample"
-
+import * as LineSegmentExample from "guide-examples/LineSegmentExample"
+import * as LineThroughPointsExample from "guide-examples/LineThroughPointsExample"
+import * as LinePointSlopeExample from "guide-examples/LinePointSlopeExample"
+import * as LinePointAngleExample from "guide-examples/LinePointAngleExample"
 function Lines() {
   return (
     <>
       <p>There are a few components for lines, depending on how you want to construct them.</p>
 
       <h2>Line segment</h2>
 
-      <CodeAndExample component={<LineSegmentExample />} source={LineSegmentExampleSource} />
+      <CodeAndExample example={LineSegmentExample} />
       <PropTable of={"Line.Segment"} />
 
       <h2>Line through two points</h2>
 
-      <CodeAndExample
-        component={<LineThroughPointsExample />}
-        source={LineThroughPointsExampleSource}
-      />
+      <CodeAndExample example={LineThroughPointsExample} />
       <PropTable of={"Line.ThroughPoints"} />
 
       <h2>Point and slope</h2>
 
-      <CodeAndExample component={<LinePointSlopeExample />} source={LinePointSlopeExampleSource} />
+      <CodeAndExample example={LinePointSlopeExample} />
       <PropTable of={"Line.PointSlope"} />
 
       <h2>Point and angle</h2>
 
-      <CodeAndExample component={<LinePointAngleExample />} source={LinePointAngleExampleSource} />
+      <CodeAndExample example={LinePointAngleExample} />
       <PropTable of={"Line.PointAngle"} />
     </>
   )

docs/app/guides/display/mafs/page.tsx

@@ -1,17 +1,10 @@
 import CodeAndExample from "components/CodeAndExample"
 import { PropTable } from "components/PropTable"
 
-import PlainMafsExample from "guide-examples/PlainMafsExample"
-import PlainMafsExampleSource from "!raw-loader!guide-examples/PlainMafsExample"
-
-import ContainViewboxExample from "guide-examples/display/viewbox/ContainViewbox"
-import ContainViewboxExampleSource from "!raw-loader!guide-examples/display/viewbox/ContainViewbox"
-
-import ZoomExample from "guide-examples/display/viewbox/ZoomExample"
-import ZoomExampleSource from "!raw-loader!guide-examples/display/viewbox/ZoomExample"
-
-import StretchViewboxExample from "guide-examples/display/viewbox/StretchViewbox"
-import StretchViewboxExampleSource from "!raw-loader!guide-examples/display/viewbox/StretchViewbox"
+import * as PlainMafsExample from "guide-examples/PlainMafsExample"
+import * as ContainViewboxExample from "guide-examples/display/viewbox/ContainViewbox"
+import * as ZoomExample from "guide-examples/display/viewbox/ZoomExample"
+import * as StretchViewboxExample from "guide-examples/display/viewbox/StretchViewbox"
 import Code from "components/Code"
 
 export async function generateMetadata() {
@@ -28,7 +21,7 @@ function MafsPage() {
         components. On its own, it renders a blank canvas.
       </p>
 
-      <CodeAndExample component={<PlainMafsExample />} source={PlainMafsExampleSource} />
+      <CodeAndExample example={PlainMafsExample} />
       <PropTable of="Mafs" />
 
       <h2>Sizing</h2>
@@ -63,7 +56,7 @@ function MafsPage() {
         <code>0.5-5</code>
       </p>
 
-      <CodeAndExample component={<ZoomExample />} source={ZoomExampleSource} />
+      <CodeAndExample example={ZoomExample} />
 
       <h2>Viewbox</h2>
 
@@ -73,7 +66,7 @@ function MafsPage() {
         to specify this with the <code>viewBox</code> prop.
       </p>
 
-      <CodeAndExample component={<ContainViewboxExample />} source={ContainViewboxExampleSource} />
+      <CodeAndExample example={ContainViewboxExample} />
 
       <h3>Aspect ratio preservation</h3>
 
@@ -83,7 +76,7 @@ function MafsPage() {
         tossing aside the aspect ratio preservation.
       </p>
 
-      <CodeAndExample component={<StretchViewboxExample />} source={StretchViewboxExampleSource} />
+      <CodeAndExample example={StretchViewboxExample} />
 
       <p>
         The only other option is <code>"contain"</code> for now, which is also the default.

docs/app/guides/display/plots/page.tsx

@@ -1,21 +1,17 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import OfXAndY from "guide-examples/plots/of-x-and-y"
+import * as OfXAndY from "guide-examples/plots/of-x-and-y"
 import OfXAndYSource from "!raw-loader!guide-examples/plots/of-x-and-y.tsx"
 
-import TwistyBoi from "guide-examples/plots/twisty-boi"
+import * as TwistyBoi from "guide-examples/plots/twisty-boi"
 import TwistyBoiSource from "!raw-loader!guide-examples/plots/twisty-boi.tsx"
 
-import VectorFieldExample from "guide-examples/VectorFieldExample"
-import VectorFieldExampleSource from "!raw-loader!guide-examples/VectorFieldExample"
-
-import SineStressTest from "guide-examples/plots/sine-stress-test"
+import * as VectorFieldExample from "guide-examples/VectorFieldExample"
+import * as SineStressTest from "guide-examples/plots/sine-stress-test"
 import SineStressTestSource from "!raw-loader!guide-examples/plots/sine-stress-test.tsx"
 
 import { PropTable } from "components/PropTable"
-import InequalitiesExample from "guide-examples/plots/inequalities"
-import InequalitiesExampleSource from "!raw-loader!guide-examples/plots/inequalities.tsx"
-
+import * as InequalitiesExample from "guide-examples/plots/inequalities"
 function Functions() {
   return (
     <>
@@ -27,7 +23,7 @@ function Functions() {
       <h2>
         Functions of <em className="font-display">x</em> and <em className="font-display">y</em>
       </h2>
-      <CodeAndExample component={<OfXAndY />} source={OfXAndYSource} />
+      <CodeAndExample example={OfXAndY} />
       <PropTable of={"Plot.OfX"} />
       <PropTable of={"Plot.OfY"} />
 
@@ -48,11 +44,11 @@ function Functions() {
         <code>&lt;</code> <em>and</em> <code>≤</code>.
       </p>
 
-      <CodeAndExample component={<InequalitiesExample />} source={InequalitiesExampleSource} />
+      <CodeAndExample example={InequalitiesExample} />
       <PropTable of={"Plot.Inequality"} />
 
       <h2>Parametric functions</h2>
-      <CodeAndExample component={<TwistyBoi />} source={TwistyBoiSource} />
+      <CodeAndExample example={TwistyBoi} />
       <PropTable of={"Plot.Parametric"} />
 
       <h2>Vector fields</h2>
@@ -64,7 +60,7 @@ function Functions() {
         vector field is.
       </p>
 
-      <CodeAndExample component={<VectorFieldExample />} source={VectorFieldExampleSource} />
+      <CodeAndExample example={VectorFieldExample} />
       <PropTable of={"Plot.VectorField"} />
 
       <h2>Render quality</h2>
@@ -105,7 +101,7 @@ function Functions() {
         plot has nearly 3 megabytes of SVG path data).
       </p>
 
-      <CodeAndExample component={<SineStressTest />} source={SineStressTestSource} />
+      <CodeAndExample example={SineStressTest} />
 
       <p>
         If you pan this example around, you may see a considerably slow framerate. Interestingly,

docs/app/guides/display/points/page.tsx

@@ -1,6 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import SimplePoint from "guide-examples/display/SimplePoint"
+import * as SimplePoint from "guide-examples/display/SimplePoint"
 import SimplePointSource from "!raw-loader!guide-examples/display/SimplePoint"
 
 import { PropTable } from "components/PropTable"
@@ -10,7 +10,7 @@ function Points() {
     <>
       <p>Points are dots that can be rendered at a location (x, y).</p>
 
-      <CodeAndExample component={<SimplePoint />} source={SimplePointSource} />
+      <CodeAndExample example={SimplePoint} />
 
       <PropTable of={"Point"} />
     </>

docs/app/guides/display/polygons/page.tsx

@@ -1,21 +1,19 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import PolygonExample from "guide-examples/PolygonExample"
-import PolygonExampleSource from "!raw-loader!guide-examples/PolygonExample"
-import PolylineExample from "guide-examples/PolylineExample"
-import PolylineExampleSource from "!raw-loader!guide-examples/PolylineExample"
+import * as PolygonExample from "guide-examples/PolygonExample"
+import * as PolylineExample from "guide-examples/PolylineExample"
 import { PropTable } from "components/PropTable"
 
 function Polygons() {
   return (
     <>
       <p>Polygons take a number of points and create a closed shape.</p>
 
-      <CodeAndExample component={<PolygonExample />} source={PolygonExampleSource} />
+      <CodeAndExample example={PolygonExample} />
 
       <PropTable of={"Polygon"} />
 
-      <CodeAndExample component={<PolylineExample />} source={PolylineExampleSource} />
+      <CodeAndExample example={PolylineExample} />
 
       <PropTable of={"Polyline"} />
     </>

docs/app/guides/display/text/page.tsx

@@ -1,7 +1,6 @@
 import CodeAndExample from "components/CodeAndExample"
 
-import TextExample from "guide-examples/TextExample"
-import TextExampleSource from "!raw-loader!guide-examples/TextExample"
+import * as TextExample from "guide-examples/TextExample"
 import { PropTable } from "components/PropTable"
 
 function Text() {
@@ -13,7 +12,7 @@ function Text() {
         <code>attach</code> will orient the text along a cardinal direction ("n", "s", "nw", etc.)
       </p>
 
-      <CodeAndExample component={<TextExample />} source={TextExampleSource} />
+      <CodeAndExample example={TextExample} />
 
       <PropTable of={"Text"} />
     </>