Draft: what the JS/HTML template building might look like

CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## 1.4.0
 
+- Components of a user provided component library can now be used inside
+  `<Playground>` to create interactive demos of components.
 - Support _Table of Contents_ on documents.
 - Introduced new `<ImageGrid>` documentation component.
 

Makefile

@@ -6,6 +6,7 @@
 
 FRONTEND ?= $(shell pwd)/frontend/build
 DDT ?= $(shell pwd)/../example-design-system
+COMPONENTS ?= $(shell pwd)/../example-component-library/build
 
 VERSION ?= head-$(shell git rev-parse --short HEAD)
 LDFLAGS = -X main.Version=$(VERSION)
@@ -28,7 +29,7 @@ profile:
 .PHONY: dev
 dev:
 	go build -tags=dev -ldflags "$(LDFLAGS)" $(CMD_PKG)
-	./dsk -frontend $(FRONTEND) "$(DDT)"
+	./dsk -frontend $(FRONTEND) -components $(COMPONENTS) "$(DDT)"
 	rm dsk
 
 .PHONY: clean

cmd/dsk/main.go

@@ -58,10 +58,11 @@ func main() {
 		}
 	}()
 
-	host := flag.String("host", "127.0.0.1", "host IP to bind to")
-	port := flag.String("port", "8080", "port to bind to")
-	version := flag.Bool("version", false, "print DSK version")
-	noColor := flag.Bool("no-color", false, "disables color output")
+	fhost := flag.String("host", "127.0.0.1", "host IP to bind to")
+	fport := flag.String("port", "8080", "port to bind to")
+	fversion := flag.Bool("version", false, "print DSK version")
+	fnoColor := flag.Bool("no-color", false, "disables color output")
+	fcomponents := flag.String("components", "", "path to component library assets")
 	ffrontend := flag.String("frontend", "", "path to a frontend, to use instead of the built-in")
 	fallowOrigin := flag.String("allow-origin", "", "origins from which browsers can access the HTTP API; for multiple origins, use a comma as a separator, the wildcard * is supported; to allow all use *")
 	flag.Parse()
@@ -70,14 +71,14 @@ func main() {
 		log.Fatalf("Too many arguments given, expecting exactly 0 or 1")
 	}
 
-	if *version {
+	if *fversion {
 		fmt.Println(Version)
 		os.Exit(1)
 	}
 
 	// Color package automatically disables colors when not a TTY. We
 	// don't need to check for an interactive terminal here again.
-	if *noColor {
+	if *fnoColor {
 		color.NoColor = true
 	}
 	whiteOnBlue := color.New(color.FgWhite, color.BgBlue)
@@ -114,7 +115,17 @@ func main() {
 	if err != nil {
 		panic(err)
 	}
-	log.Printf("Detected live path: %s", livePath)
+	log.Printf("Using live path: %s", livePath)
+
+	var componentsPath string
+	if *fcomponents != "" {
+		componentsPath = *fcomponents
+	}
+
+	var frontendPath string
+	if *ffrontend != "" {
+		frontendPath = *ffrontend
+	}
 
 	allowOrigins := strings.Split(*fallowOrigin, ",")
 	if len(allowOrigins) != 0 {
@@ -124,7 +135,8 @@ func main() {
 	app = plex.NewApp( // assign to global
 		Version,
 		livePath,
-		*ffrontend,
+		componentsPath,
+		frontendPath,
 	)
 	ctx, cancel := context.WithCancel(context.Background())
 	app.Teardown.AddCancelFunc(cancel)
@@ -133,6 +145,12 @@ func main() {
 		log.Fatal(red.Sprintf("Failed to initialize application: %s", err))
 	}
 
+	if componentsPath != "" {
+		if err := app.OpenComponents(ctx); err != nil {
+			log.Print(red.Sprintf("Failed to start application: %s", err))
+		}
+	}
+
 	if app.HasMultiVersionsSupport() {
 		log.Printf("Detected support for multi-versions")
 
@@ -145,7 +163,7 @@ func main() {
 
 	apis := map[int]httputil.Mountable{
 		1: api.NewV1(app.Sources, app.Version, app.Broker, allowOrigins),
-		2: api.NewV2(app.Sources, app.Version, app.Broker, allowOrigins),
+		2: api.NewV2(app.Sources, app.Components, app.Version, app.Broker, allowOrigins),
 	}
 	for av, a := range apis {
 		log.Printf("Mounting APIv%d HTTP mux...", av)
@@ -159,7 +177,7 @@ func main() {
 	log.Print("Mounting frontend HTTP mux...")
 	mux.Handle("/", app.Frontend.HTTPMux())
 
-	addr := fmt.Sprintf("%s:%s", *host, *port)
+	addr := fmt.Sprintf("%s:%s", *fhost, *fport)
 	if isTerminal {
 		log.Print("-------------------------------------------")
 		log.Printf("Please visit: %s", green.Sprint("http://"+addr))

frontend/.yarnrc.yml

@@ -3,4 +3,5 @@
 # Use of this source code is governed by a BSD-style
 # license that can be found in the LICENSE file.
 
-yarnPath: ".yarn/releases/yarn-berry.cjs"
+yarnPath: ".yarn/releases/yarn-berry.cjs"
+nodeLinker: node-modules

frontend/src/Playground/index.js

@@ -10,9 +10,11 @@ import React, { useState, useEffect } from 'react';
 import './Playground.css';
 import { Client } from '@rundsk/js-sdk';
 
+// TODO: annonations currently use src attribute isn't that confusing, would expect this to become the contents of the playground.
 function Playground(props) {
   const [annotationData, setAnnotationData] = useState({ annotations: [] });
   const [highlightedAnnotation, setHighlightedAnnotation] = useState(null);
+  const [stage, setStage] = useState(null);
 
   let classes = ['playground'];
 
@@ -105,7 +107,7 @@ function Playground(props) {
           {annotationMarkers}
 
           {/* This wrapper doesn’t do any styling, we just need the content to be isolated for stuff like :first-child to work */}
-          <div className="playground__stage-content">{props.children}</div>
+          <div className="playground__stage-content">{stage}</div>
         </div>
       </div>
       {annotations.length > 0 && <div className="playground__annotations">{annotations}</div>}

frontend/src/playground-runtime.jsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+document.addEventListener('DOMContentLoaded', () => {
+  ReactDOM.render(<ThePlaygroundInQuestion />, document.getElementById('root'));
+});