Date: Mon, 20 Apr 2026 20:25:49 +0200
Subject: [PATCH 14/40] feat(gnoweb): refactor playground render to follow
coding standard
Changes HTTP handler to follow Gnoweb's view render patterns.
---
.../pkg/gnoweb/components/layout_header.go | 2 +
.../pkg/gnoweb/components/layout_index.go | 22 +++---
gno.land/pkg/gnoweb/components/layout_test.go | 41 +++++++---
gno.land/pkg/gnoweb/components/view_test.go | 2 -
.../frontend/js/controller-playground.ts | 8 +-
gno.land/pkg/gnoweb/handler_http.go | 76 +++++++------------
gno.land/pkg/gnoweb/handler_http_test.go | 1 +
gno.land/pkg/gnoweb/weburl/url.go | 11 +++
gno.land/pkg/gnoweb/weburl/url_test.go | 11 +++
9 files changed, 101 insertions(+), 73 deletions(-)
diff --git a/gno.land/pkg/gnoweb/components/layout_header.go b/gno.land/pkg/gnoweb/components/layout_header.go
index 43c94c21866..06eaaa29112 100644
--- a/gno.land/pkg/gnoweb/components/layout_header.go
+++ b/gno.land/pkg/gnoweb/components/layout_header.go
@@ -97,6 +97,8 @@ func StaticHeaderDevLinks(u weburl.GnoURL, mode ViewMode, static bool) []HeaderL
return []HeaderLink{contentLink}
case mode == ViewModePackage:
return []HeaderLink{contentLink, sourceLink, forkLink}
+ case mode == ViewModePlayground:
+ return []HeaderLink{}
default:
return []HeaderLink{contentLink, sourceLink, actionsLink, evalLink, forkLink, runLink}
}
diff --git a/gno.land/pkg/gnoweb/components/layout_index.go b/gno.land/pkg/gnoweb/components/layout_index.go
index e9d5771c064..7a248fe3435 100644
--- a/gno.land/pkg/gnoweb/components/layout_index.go
+++ b/gno.land/pkg/gnoweb/components/layout_index.go
@@ -7,19 +7,21 @@ import "strings"
type ViewMode int
const (
- ViewModeExplorer ViewMode = iota // For exploring packages and paths
- ViewModeRealm // For realm content display
- ViewModePackage // For package content display
- ViewModeHome // For home page display
- ViewModeUser // For user page display
+ ViewModeExplorer ViewMode = iota // For exploring packages and paths
+ ViewModeRealm // For realm content display
+ ViewModePackage // For package content display
+ ViewModeHome // For home page display
+ ViewModeUser // For user page display
+ ViewModePlayground // For playground display
)
// View mode predicates
-func (m ViewMode) IsExplorer() bool { return m == ViewModeExplorer }
-func (m ViewMode) IsRealm() bool { return m == ViewModeRealm }
-func (m ViewMode) IsPackage() bool { return m == ViewModePackage }
-func (m ViewMode) IsUser() bool { return m == ViewModeUser }
-func (m ViewMode) IsHome() bool { return m == ViewModeHome }
+func (m ViewMode) IsExplorer() bool { return m == ViewModeExplorer }
+func (m ViewMode) IsRealm() bool { return m == ViewModeRealm }
+func (m ViewMode) IsPackage() bool { return m == ViewModePackage }
+func (m ViewMode) IsUser() bool { return m == ViewModeUser }
+func (m ViewMode) IsHome() bool { return m == ViewModeHome }
+func (m ViewMode) IsPlayground() bool { return m == ViewModePlayground }
// ShouldShowDevTools returns whether dev tools should be shown for this mode
func (m ViewMode) ShouldShowDevTools() bool {
diff --git a/gno.land/pkg/gnoweb/components/layout_test.go b/gno.land/pkg/gnoweb/components/layout_test.go
index 92e07f3cac6..d3143e6448f 100644
--- a/gno.land/pkg/gnoweb/components/layout_test.go
+++ b/gno.land/pkg/gnoweb/components/layout_test.go
@@ -46,6 +46,11 @@ func TestIndexLayout(t *testing.T) {
mode: ViewModePackage,
viewType: DirectoryViewType,
},
+ {
+ name: "Playground view",
+ mode: ViewModePlayground,
+ viewType: "test-view",
+ },
}
for _, tt := range tests {
@@ -169,7 +174,6 @@ func TestIsActive(t *testing.T) {
}
for _, tc := range cases {
- tc := tc
t.Run(tc.name, func(t *testing.T) {
result := isActive(tc.query, tc.label)
assert.Equal(t, tc.expected, result)
@@ -234,6 +238,18 @@ func TestStaticHeaderDevLinks_WithExplorerMode(t *testing.T) {
assert.Empty(t, links, "expected no links in explorer mode")
}
+func TestStaticHeaderDevLinks_WithPlaygroundMode(t *testing.T) {
+ t.Parallel()
+
+ u := weburl.GnoURL{
+ Path: "/_/play",
+ }
+
+ // Test playground mode
+ links := StaticHeaderDevLinks(u, ViewModePlayground, false)
+ assert.Empty(t, links, "expected no links in playground mode")
+}
+
func TestEnrichHeaderData_WithRealmMode(t *testing.T) {
t.Parallel()
@@ -268,13 +284,14 @@ func TestEnrichHeaderData_WithExplorerMode(t *testing.T) {
func TestViewModePredicates(t *testing.T) {
cases := []struct {
- mode ViewMode
- name string
- wantExplorer bool
- wantRealm bool
- wantPackage bool
- wantHome bool
- wantUser bool
+ mode ViewMode
+ name string
+ wantExplorer bool
+ wantRealm bool
+ wantPackage bool
+ wantHome bool
+ wantUser bool
+ wantPlayground bool
}{
{
mode: ViewModeExplorer,
@@ -301,16 +318,21 @@ func TestViewModePredicates(t *testing.T) {
name: "User",
wantUser: true,
},
+ {
+ mode: ViewModePlayground,
+ name: "Playground",
+ wantPlayground: true,
+ },
}
for _, tc := range cases {
- tc := tc
t.Run(tc.name, func(t *testing.T) {
assert.Equal(t, tc.wantExplorer, tc.mode.IsExplorer(), "IsExplorer")
assert.Equal(t, tc.wantRealm, tc.mode.IsRealm(), "IsRealm")
assert.Equal(t, tc.wantPackage, tc.mode.IsPackage(), "IsPackage")
assert.Equal(t, tc.wantHome, tc.mode.IsHome(), "IsHome")
assert.Equal(t, tc.wantUser, tc.mode.IsUser(), "IsUser")
+ assert.Equal(t, tc.wantPlayground, tc.mode.IsPlayground(), "IsPlayground")
})
}
}
@@ -342,7 +364,6 @@ func TestIndexLayout_ThemePropagation(t *testing.T) {
}
for _, tc := range cases {
- tc := tc
t.Run(tc.name, func(t *testing.T) {
t.Parallel()
diff --git a/gno.land/pkg/gnoweb/components/view_test.go b/gno.land/pkg/gnoweb/components/view_test.go
index fcc03968e00..2c479561d0a 100644
--- a/gno.land/pkg/gnoweb/components/view_test.go
+++ b/gno.land/pkg/gnoweb/components/view_test.go
@@ -339,7 +339,6 @@ func TestDirLinkType_LinkPrefix(t *testing.T) {
}
for _, tc := range cases {
- tc := tc
t.Run(tc.name, func(t *testing.T) {
result := tc.linkType.LinkPrefix(tc.pkgPath)
assert.Equal(t, tc.expected, result)
@@ -385,7 +384,6 @@ func TestGetFullLinks(t *testing.T) {
}
for _, tc := range cases {
- tc := tc
t.Run(tc.name, func(t *testing.T) {
result := GetFullLinks(tc.files, tc.linkType, tc.pkgPath)
assert.Equal(t, tc.expected, result)
diff --git a/gno.land/pkg/gnoweb/frontend/js/controller-playground.ts b/gno.land/pkg/gnoweb/frontend/js/controller-playground.ts
index 53581cdbbd8..10992b2f3af 100644
--- a/gno.land/pkg/gnoweb/frontend/js/controller-playground.ts
+++ b/gno.land/pkg/gnoweb/frontend/js/controller-playground.ts
@@ -128,7 +128,13 @@ export default function PlaygroundController(element: HTMLElement): void {
files.length === 1
? files[0].content
: files.map((f) => `// --- ${f.name} ---\n${f.content}`).join("\n\n");
- const url = `${window.location.origin}/_/play?code=${encodeURIComponent(code)}`;
+
+ // Encode as base64; TextEncoder produces UTF-8 bytes, which are mapped to a
+ // Latin-1 binary string so btoa() can handle non-ASCII chars, then the
+ // resulting base64 is percent-encoded to be safe in a URL query parameter.
+ const bytes = new TextEncoder().encode(code);
+ const binary = Array.from(bytes, (b) => String.fromCharCode(b)).join("");
+ const url = `${window.location.origin}/_/play?code=${encodeURIComponent(btoa(binary))}`;
navigator.clipboard
.writeText(url)
.then(() => {
diff --git a/gno.land/pkg/gnoweb/handler_http.go b/gno.land/pkg/gnoweb/handler_http.go
index cbb05547c9d..47eedd89da1 100644
--- a/gno.land/pkg/gnoweb/handler_http.go
+++ b/gno.land/pkg/gnoweb/handler_http.go
@@ -3,6 +3,7 @@ package gnoweb
import (
"bytes"
"context"
+ "encoding/base64"
"errors"
"fmt"
"go/token"
@@ -22,6 +23,13 @@ import (
const ReadmeFileName = "README.md"
+const defaultPlaygroundCode = `package main
+
+func Render(path string) string {
+ return "Hello, Playground!"
+}
+`
+
// StaticMetadata holds static configuration for a web handler.
type StaticMetadata struct {
Domain string
@@ -157,12 +165,6 @@ func (h *HTTPHandler) Get(w http.ResponseWriter, r *http.Request) {
return
}
- // Handle playground page
- if r.URL.Path == "/_/play" {
- h.servePlayground(w, r)
- return
- }
-
// Handle download request outside of component rendering flow.
if gnourl.WebQuery.Has("download") {
h.ServeSourceDownload(r.Context(), gnourl, w, r)
@@ -177,6 +179,8 @@ func (h *HTTPHandler) Get(w http.ResponseWriter, r *http.Request) {
indexData.Mode = components.ViewModePackage
case gnourl.IsUser():
indexData.Mode = components.ViewModeUser
+ case gnourl.IsPlayground():
+ indexData.Mode = components.ViewModePlayground
default:
indexData.Mode = components.ViewModeRealm
}
@@ -271,10 +275,12 @@ func (h *HTTPHandler) prepareIndexBodyView(r *http.Request, indexData *component
switch {
case aliasExists && aliasTarget.Kind == StaticMarkdown:
- indexData.HeaderData.Static = true
+ indexData.HeaderData.Static = true // TODO: Move inside GetMarkdownView
return h.GetMarkdownView(gnourl, aliasTarget.Value)
- case gnourl.IsRealm(), gnourl.IsPure(), gnourl.IsUser():
+ case gnourl.IsRealm(), gnourl.IsPure(), gnourl.IsUser(), gnourl.IsPackageFork():
return h.GetPackageView(ctx, gnourl, indexData)
+ case gnourl.IsPlayground():
+ return h.GetPlaygroundView(gnourl, indexData)
default:
h.Logger.Debug("invalid path: path is neither a pure package or a realm")
return http.StatusBadRequest, components.StatusErrorComponent("invalid path")
@@ -740,58 +746,28 @@ func (h *HTTPHandler) ServeSourceDownload(ctx context.Context, gnourl *weburl.Gn
w.Write(source) // write raw file
}
-// servePlayground renders the standalone playground page.
-func (h *HTTPHandler) servePlayground(w http.ResponseWriter, r *http.Request) {
- var theme string
- if c, err := r.Cookie("theme"); err == nil {
- if c.Value == "light" || c.Value == "dark" {
- theme = c.Value
- }
- }
-
- // Check if we have initial code from query (e.g. shared snippet)
- initialCode := r.URL.Query().Get("code")
- forkFrom := r.URL.Query().Get("from")
- if initialCode == "" {
- initialCode = `package main
+// GetPlaygroundView renders the standalone playground page.
+func (h *HTTPHandler) GetPlaygroundView(gnourl *weburl.GnoURL, indexData *components.IndexData) (int, *components.View) {
+ indexData.HeadData.Title = "Playground — " + h.Static.Domain
-func Render(path string) string {
- return "Hello, Playground!"
-}
-`
+ // Check if we have initial code from query (e.g. shared snippet).
+ // Code can be given as a base64 encoded string or plaintext.
+ initialCode := gnourl.Query.Get("code")
+ if decoded, err := base64.StdEncoding.DecodeString(initialCode); err == nil {
+ initialCode = string(decoded)
}
- indexData := components.IndexData{
- HeadData: components.HeadData{
- Title: "Playground — " + h.Static.Domain,
- AssetsPath: h.Static.AssetsPath,
- ChromaPath: h.Static.ChromaPath,
- ChainId: h.Static.ChainId,
- Remote: h.Static.RemoteHelp,
- BuildTime: h.Static.BuildTime,
- },
- FooterData: components.FooterData{
- Analytics: h.Static.Analytics,
- AssetsPath: h.Static.AssetsPath,
- BuildTime: h.Static.BuildTime,
- },
- Theme: theme,
- Banner: h.Static.Banner,
- Mode: components.ViewModeRealm,
+ // Use default code when no code is provided
+ if initialCode == "" {
+ initialCode = defaultPlaygroundCode
}
- indexData.BodyView = components.PlaygroundView(components.PlaygroundData{
+ return http.StatusOK, components.PlaygroundView(components.PlaygroundData{
InitialCode: initialCode,
- ForkFrom: forkFrom,
Remote: h.Static.RemoteHelp,
ChainId: h.Static.ChainId,
Domain: h.Static.Domain,
})
-
- w.WriteHeader(http.StatusOK)
- if err := components.IndexLayout(indexData).Render(w); err != nil {
- h.Logger.Error("failed to render playground", "error", err)
- }
}
// GetEvalView renders the expression evaluator page for a package/realm.
diff --git a/gno.land/pkg/gnoweb/handler_http_test.go b/gno.land/pkg/gnoweb/handler_http_test.go
index 5060621cc92..3c40cfb3a45 100644
--- a/gno.land/pkg/gnoweb/handler_http_test.go
+++ b/gno.land/pkg/gnoweb/handler_http_test.go
@@ -1355,6 +1355,7 @@ func TestHTTPHandler_PlaygroundPage(t *testing.T) {
}{
{"default playground", "/_/play", "Playground"},
{"with initial code", "/_/play?code=package+main", "package main"},
+ {"with initial encoded code", "/_/play?code=cGFja2FnZSBtYWluCg==", "package main"},
{"with fork param", "/_/play?from=gno.land/r/demo/foo", "gno.land/r/demo/foo"},
}
diff --git a/gno.land/pkg/gnoweb/weburl/url.go b/gno.land/pkg/gnoweb/weburl/url.go
index b6866f49e80..784ce3d69ff 100644
--- a/gno.land/pkg/gnoweb/weburl/url.go
+++ b/gno.land/pkg/gnoweb/weburl/url.go
@@ -166,6 +166,17 @@ func (gnoURL GnoURL) IsDir() bool {
len(gnoURL.Path) > 0 && gnoURL.Path[len(gnoURL.Path)-1] == '/'
}
+// IsPlayground checks if the URL path represents the integrated playground.
+func (gnoURL GnoURL) IsPlayground() bool {
+ // Package fork source code is displayed within the playground
+ return gnoURL.Path == "/_/play" || gnoURL.IsPackageFork()
+}
+
+// IsPackageFork checks if the URL represents a package fork.
+func (gnoURL GnoURL) IsPackageFork() bool {
+ return gnoURL.WebQuery.Has("fork")
+}
+
// rePkgPath matches and validates a path.
var rePkgPath = regexp.MustCompile(`^/[a-z0-9_/]*$`)
diff --git a/gno.land/pkg/gnoweb/weburl/url_test.go b/gno.land/pkg/gnoweb/weburl/url_test.go
index 7ed4b647cf1..a5bfd6f5e3d 100644
--- a/gno.land/pkg/gnoweb/weburl/url_test.go
+++ b/gno.land/pkg/gnoweb/weburl/url_test.go
@@ -245,6 +245,17 @@ func TestParseGnoURL(t *testing.T) {
},
},
+ {
+ Name: "playground",
+ Input: "https://gno.land/_/play",
+ Expected: &GnoURL{
+ Path: "/_/play",
+ WebQuery: url.Values{},
+ Query: url.Values{},
+ Domain: "gno.land",
+ },
+ },
+
{
Name: "invalid path",
Input: "https://gno.land/r/dem)o:$?",
From f42524a4f89315c8c3a368457ba9490b99031b6f Mon Sep 17 00:00:00 2001
From: jeronimoalbi <894299+jeronimoalbi@users.noreply.github.com>
Date: Mon, 20 Apr 2026 20:28:58 +0200
Subject: [PATCH 15/40] chore(gnoweb): change HTTP handler static option
location
Done to keep switch consistent and simple, moving responsibility to the
called methods.
---
gno.land/pkg/gnoweb/handler_http.go | 7 ++++---
1 file changed, 4 insertions(+), 3 deletions(-)
diff --git a/gno.land/pkg/gnoweb/handler_http.go b/gno.land/pkg/gnoweb/handler_http.go
index 47eedd89da1..a86211f30f1 100644
--- a/gno.land/pkg/gnoweb/handler_http.go
+++ b/gno.land/pkg/gnoweb/handler_http.go
@@ -275,8 +275,7 @@ func (h *HTTPHandler) prepareIndexBodyView(r *http.Request, indexData *component
switch {
case aliasExists && aliasTarget.Kind == StaticMarkdown:
- indexData.HeaderData.Static = true // TODO: Move inside GetMarkdownView
- return h.GetMarkdownView(gnourl, aliasTarget.Value)
+ return h.GetMarkdownView(gnourl, indexData, aliasTarget.Value)
case gnourl.IsRealm(), gnourl.IsPure(), gnourl.IsUser(), gnourl.IsPackageFork():
return h.GetPackageView(ctx, gnourl, indexData)
case gnourl.IsPlayground():
@@ -288,7 +287,9 @@ func (h *HTTPHandler) prepareIndexBodyView(r *http.Request, indexData *component
}
// GetMarkdownView handles rendering of markdown files.
-func (h *HTTPHandler) GetMarkdownView(gnourl *weburl.GnoURL, mdContent string) (int, *components.View) {
+func (h *HTTPHandler) GetMarkdownView(gnourl *weburl.GnoURL, indexData *components.IndexData, mdContent string) (int, *components.View) {
+ indexData.HeaderData.Static = true
+
var content bytes.Buffer
// Use Goldmark for Markdown parsing
From 3b93051e127e4646e4504f023163a855bb12df34 Mon Sep 17 00:00:00 2001
From: jeronimoalbi <894299+jeronimoalbi@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:01:33 +0200
Subject: [PATCH 16/40] feat(gnoweb): change playground tabs to match menu
styling
Done until a proper tab styling is defined.
---
.../pkg/gnoweb/frontend/css/06-blocks.css | 35 +++++++++++++------
1 file changed, 25 insertions(+), 10 deletions(-)
diff --git a/gno.land/pkg/gnoweb/frontend/css/06-blocks.css b/gno.land/pkg/gnoweb/frontend/css/06-blocks.css
index 4a19068ddff..4d6d9c1a289 100644
--- a/gno.land/pkg/gnoweb/frontend/css/06-blocks.css
+++ b/gno.land/pkg/gnoweb/frontend/css/06-blocks.css
@@ -2569,31 +2569,46 @@ main.dev-mode .b-toc a {
display: flex;
align-items: center;
gap: 0;
- background-color: var(--s-color-bg-muted);
border-bottom: 1px solid var(--s-color-border-default);
overflow-x: auto;
}
.b-playground-tab {
- padding: var(--g-space-1) var(--g-space-2);
+ position: relative;
+ padding: var(--g-space-1) var(--g-space-2) var(--g-space-3);
+ margin-right: var(--g-space-1);
border: none;
background: none;
cursor: pointer;
font-size: var(--g-font-size-50);
font-family: var(--g-font-mono);
- color: var(--s-color-text-muted);
- border-bottom: 2px solid transparent;
+ font-weight: var(--g-font-semibold);
+ color: var(--s-color-text-tertiary);
white-space: nowrap;
+ transition: color var(--g-transition-fast);
+
+ &::after {
+ content: "";
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 0;
+ height: var(--g-space-1);
+ border-radius: var(--s-rounded) var(--s-rounded) 0 0;
+ background-color: var(--s-color-bg-brand-default);
+ transition: width var(--g-transition-fast);
+ }
&:hover {
- color: var(--s-color-text-secondary);
- background-color: var(--s-color-bg-default);
+ color: var(--s-color-text-tertiary-hover);
}
+}
- &--active {
- color: var(--s-color-text-secondary);
- border-bottom-color: var(--s-color-border-brand);
- font-weight: var(--g-font-semibold);
+.b-playground-tab--active {
+ color: var(--s-color-text-secondary);
+
+ &::after {
+ width: 100%;
}
}
From ad5c92ee82d2cc60469fb1ffe57cae3980bf6b8f Mon Sep 17 00:00:00 2001
From: jeronimoalbi <894299+jeronimoalbi@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:11:33 +0200
Subject: [PATCH 17/40] chore(gnoweb): change gno URL to not consider package
fork a playground
Playground is the standalone playground, while package fork is a
different view that haoppens to use the playground temoplate to show
code.
---
gno.land/pkg/gnoweb/weburl/url.go | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/gno.land/pkg/gnoweb/weburl/url.go b/gno.land/pkg/gnoweb/weburl/url.go
index 784ce3d69ff..4a347dd1fa9 100644
--- a/gno.land/pkg/gnoweb/weburl/url.go
+++ b/gno.land/pkg/gnoweb/weburl/url.go
@@ -168,8 +168,7 @@ func (gnoURL GnoURL) IsDir() bool {
// IsPlayground checks if the URL path represents the integrated playground.
func (gnoURL GnoURL) IsPlayground() bool {
- // Package fork source code is displayed within the playground
- return gnoURL.Path == "/_/play" || gnoURL.IsPackageFork()
+ return gnoURL.Path == "/_/play"
}
// IsPackageFork checks if the URL represents a package fork.
From 65972718b35dad81de23055ca47893f2c12a3a59 Mon Sep 17 00:00:00 2001
From: jeronimoalbi <894299+jeronimoalbi@users.noreply.github.com>
Date: Tue, 21 Apr 2026 10:54:16 +0200
Subject: [PATCH 18/40] chore(gnoweb): change media breakpoints to fit new menu
entries
Eval and Fork menu items were added and previous breakpoints were not
prepared to keep new entries within the visible area. Changed
breakpoints to fit the new items.
---
gno.land/pkg/gnoweb/frontend/css/06-blocks.css | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/gno.land/pkg/gnoweb/frontend/css/06-blocks.css b/gno.land/pkg/gnoweb/frontend/css/06-blocks.css
index 4d6d9c1a289..86d1b4d0b7d 100644
--- a/gno.land/pkg/gnoweb/frontend/css/06-blocks.css
+++ b/gno.land/pkg/gnoweb/frontend/css/06-blocks.css
@@ -309,11 +309,11 @@ a.b-banner:hover {
width: var(--g-space-5);
height: var(--g-space-5);
- @media (--xl) {
+ @media (--2xl) {
display: none;
}
- @media (--2xl) {
+ @media (min-width: 1760px) {
display: inline-block;
width: var(--g-space-4-5);
height: var(--g-space-4-5);
@@ -324,7 +324,7 @@ a.b-banner:hover {
font-weight: var(--g-font-bold);
}
- @media (--2xl) {
+ @media (--max) {
padding-inline-end: var(--g-space-1);
margin-inline-end: var(--g-space-6);
}
@@ -336,7 +336,7 @@ a.b-banner:hover {
display: none;
}
- @media (--xl) {
+ @media (--2xl) {
display: inline;
}
}
From 45c2aedb8e3e9f4b35f79bb8a8e2f90772e063a6 Mon Sep 17 00:00:00 2001
From: jeronimoalbi <894299+jeronimoalbi@users.noreply.github.com>
Date: Thu, 23 Apr 2026 14:37:39 +0200
Subject: [PATCH 19/40] feat: change action controller to use `/_/api/eval`
Gno expression evaluation is done though the local API instead of making
a remote ABCI query.
---
gno.land/cmd/gnoweb/main.go | 2 +-
.../frontend/js/controller-action-function.ts | 28 ++++++++++---------
.../public/js/controller-action-function.js | 2 +-
3 files changed, 17 insertions(+), 15 deletions(-)
diff --git a/gno.land/cmd/gnoweb/main.go b/gno.land/cmd/gnoweb/main.go
index c5e69a9dbdc..e0d43dcf327 100644
--- a/gno.land/cmd/gnoweb/main.go
+++ b/gno.land/cmd/gnoweb/main.go
@@ -343,7 +343,7 @@ func SecureHeadersMiddleware(next http.Handler, strict bool, remote string) http
// scripts, styles, images, and other resources. This helps prevent
// cross-site scripting (XSS) and other code injection attacks.
csp := fmt.Sprintf(
- "default-src 'self'; script-src 'self' https://sa.gno.services; style-src 'self'; img-src %s; font-src 'self'; connect-src 'self' %s/abci_query; form-action 'self'",
+ "default-src 'self'; script-src 'self' https://sa.gno.services; style-src 'self'; img-src %s; font-src 'self'; form-action 'self'",
imgSrc,
remote,
)
diff --git a/gno.land/pkg/gnoweb/frontend/js/controller-action-function.ts b/gno.land/pkg/gnoweb/frontend/js/controller-action-function.ts
index 480c6358abc..ee2809bd301 100644
--- a/gno.land/pkg/gnoweb/frontend/js/controller-action-function.ts
+++ b/gno.land/pkg/gnoweb/frontend/js/controller-action-function.ts
@@ -196,10 +196,9 @@ export class ActionFunctionController extends BaseController {
// If there is no "qeval-result" target, then do nothing.
private async _updateQEvalResult(): Promise
{
const resultTarget = this.getTarget("qeval-result") as HTMLElement;
- const remoteTarget = this.getTarget("remote") as HTMLElement;
- // If there is no resultTarget or remoteTarget, this is a crossing function.
- if (!(resultTarget && remoteTarget)) return;
+ // Crossing functions have no qeval-result target.
+ if (!resultTarget) return;
// If there are no args, then show the "(enter param values)" placeholder.
const argNodes = this.getTargets("arg");
@@ -210,14 +209,14 @@ export class ActionFunctionController extends BaseController {
return;
}
- // Build the data string for the qeval query.
+ // Build the expression for the eval query.
const args = argNodes
.map((arg) => (arg.textContent as string).replace(/\\(.)/g, "$1"))
.join(",");
- const data = `${this._pkgPath}.${this._funcName}(${args})`;
+ const expression = `${this._funcName}(${args})`;
- // Fetch the qeval result from the remote and update the DOM.
- const result = await this._fetchQEval(remoteTarget.textContent || "", data);
+ // Fetch the eval result and update the DOM.
+ const result = await this._evalExpression(expression);
resultTarget.textContent = result;
resultTarget.classList.toggle(
"u-color-danger",
@@ -225,15 +224,18 @@ export class ActionFunctionController extends BaseController {
);
}
- // Fetch the qeval result from the remote
- private async _fetchQEval(remote: string, data: string): Promise {
+ // Fetch the eval result via the same-origin /_/api/eval endpoint.
+ private async _evalExpression(expression: string): Promise {
try {
- const url = `${remote}/abci_query?path=vm%2fqeval&data=${btoa(data)}`;
- const response = await fetch(url);
+ const response = await fetch("/_/api/eval", {
+ method: "POST",
+ headers: { "Content-Type": "application/json" },
+ body: JSON.stringify({ pkg_path: this._pkgPath, expression }),
+ });
if (!response.ok) return "";
- const result = (await response.json()).result.response.ResponseBase;
- return result.Data ? atob(result.Data) : `Error: ${result.Error.value}`;
+ const json = await response.json();
+ return json.error ? `Error: ${json.error}` : (json.result ?? "");
} catch {
return "";
}
diff --git a/gno.land/pkg/gnoweb/public/js/controller-action-function.js b/gno.land/pkg/gnoweb/public/js/controller-action-function.js
index 1d6ccd5fd7c..092b40891fa 100644
--- a/gno.land/pkg/gnoweb/public/js/controller-action-function.js
+++ b/gno.land/pkg/gnoweb/public/js/controller-action-function.js
@@ -1 +1 @@
-import{BaseController as p,debounce as g,escapeShellSpecialChars as m}from"./controller.js";var d=class extends p{sendValue=null;get _paramInputs(){return this._paramInputsCache||(this._paramInputsCache=this.getTargets("param-input")),this._paramInputsCache}connect(){this.initializeDOM({"send-code":this.getTargets("send-code")}),this._funcName=this.getValue("name")||null,this._pkgPath=this.getValue("pkgpath")||null,this._initializeArgs(),this._listenForEvents(),this._updateQEvalResult(),this._dispatchParamsChanged()}_listenForEvents(){this.on("mode:changed",e=>{let t=e.detail.mode;this._updateAllFunctionsMode(t)}),this.on("address:changed",e=>{let t=e.detail.address;this._updateAllFunctionsAddress(t)})}_updateAllFunctionsMode(e){this.getTargets("mode").forEach(t=>{let s=this.getValue("mode",t)===e;t.classList.toggle("u-inline",s),t.classList.toggle("u-hidden",!s),t.dataset.copyTarget=s&&this._funcName?`action-function-${this._funcName}`:""})}_updateAllFunctionsAddress(e){this.getTargets("address").forEach(t=>{t.textContent=e.trim()||"ADDRESS"})}_getParamCurrentValue(e){let a=this._paramInputs.filter(s=>this.getValue("param",s)===e);if(!a.length)return"";let t=a[0];return t.type==="checkbox"?a.filter(s=>s.checked).map(s=>s.value.trim()).join(","):t.type==="radio"?a.find(n=>n.checked)?.value.trim()||"":t.value.trim()}_initializeArgs(){let e=new Set;this._params={},this._paramInputs.forEach(a=>{let t=this.getValue("param",a)||"";if(!t||e.has(t))return;let s=this._getParamCurrentValue(t);this._params[t]=s,s&&this._updateArgInDOM(t,s),e.add(t)})}_debouncedUpdateAllArgs=g((e,a)=>{e&&(this._updateArgInDOM(e,a),this._updateQEvalResult(),this._dispatchParamsChanged())},50);_dispatchParamsChanged(){!this._funcName||!this._pkgPath||this.dispatch("params:changed",{pkgPath:this._pkgPath,funcName:this._funcName,params:{...this._params},send:this.sendValue||void 0})}_updateArgInDOM(e,a){let t=m(a);this.getTargets("arg").filter(o=>this.getValue("arg",o)===e).forEach(o=>{o.textContent=t||""});let s=this.getTarget("function-execute"),n=this.getTarget("function-anchor");if(!s&&!n)return;let c=s?.getAttribute("action")||n?.getAttribute("data-copy-text-value");if(!c)return;let r=c.split("&"),i=encodeURIComponent(a),u=r.findIndex((o,h)=>h>0&&o.startsWith(`${e}=`));u!==-1?r[u]=`${e}=${i}`:r.push(`${e}=${i}`);let l=r.join("&");s?.setAttribute("action",l),n?.setAttribute("data-copy-text-value",l)}async _updateQEvalResult(){let e=this.getTarget("qeval-result"),a=this.getTarget("remote");if(!(e&&a))return;let t=this.getTargets("arg");if(!t.every(i=>i.textContent!=="")){e.textContent="(enter param values)",e.classList.remove("u-color-danger");return}let n=t.map(i=>i.textContent.replace(/\\(.)/g,"$1")).join(","),c=`${this._pkgPath}.${this._funcName}(${n})`,r=await this._fetchQEval(a.textContent||"",c);e.textContent=r,e.classList.toggle("u-color-danger",r.startsWith("Error:"))}async _fetchQEval(e,a){try{let t=`${e}/abci_query?path=vm%2fqeval&data=${btoa(a)}`,s=await fetch(t);if(!s.ok)return"";let n=(await s.json()).result.response.ResponseBase;return n.Data?atob(n.Data):`Error: ${n.Error.value}`}catch{return""}}updateAllArgs(e){let a=e.target,t=this.getValue("param",a);if(!t)return;let s=this._getParamCurrentValue(t);this._params[t]=s,this._debouncedUpdateAllArgs(t,s)}updateAllFunctionsSend(e){let a=e.params?.send||!1;this.sendValue=a?this.getValue("send"):null,this.getDOMArray("send-code").forEach(t=>{t.textContent=this.sendValue||""}),this._dispatchParamsChanged()}};export{d as ActionFunctionController};
+import{BaseController as p,debounce as g,escapeShellSpecialChars as m}from"./controller.js";var l=class extends p{sendValue=null;get _paramInputs(){return this._paramInputsCache||(this._paramInputsCache=this.getTargets("param-input")),this._paramInputsCache}connect(){this.initializeDOM({"send-code":this.getTargets("send-code")}),this._funcName=this.getValue("name")||null,this._pkgPath=this.getValue("pkgpath")||null,this._initializeArgs(),this._listenForEvents(),this._updateQEvalResult(),this._dispatchParamsChanged()}_listenForEvents(){this.on("mode:changed",e=>{let t=e.detail.mode;this._updateAllFunctionsMode(t)}),this.on("address:changed",e=>{let t=e.detail.address;this._updateAllFunctionsAddress(t)})}_updateAllFunctionsMode(e){this.getTargets("mode").forEach(t=>{let a=this.getValue("mode",t)===e;t.classList.toggle("u-inline",a),t.classList.toggle("u-hidden",!a),t.dataset.copyTarget=a&&this._funcName?`action-function-${this._funcName}`:""})}_updateAllFunctionsAddress(e){this.getTargets("address").forEach(t=>{t.textContent=e.trim()||"ADDRESS"})}_getParamCurrentValue(e){let s=this._paramInputs.filter(a=>this.getValue("param",a)===e);if(!s.length)return"";let t=s[0];return t.type==="checkbox"?s.filter(a=>a.checked).map(a=>a.value.trim()).join(","):t.type==="radio"?s.find(r=>r.checked)?.value.trim()||"":t.value.trim()}_initializeArgs(){let e=new Set;this._params={},this._paramInputs.forEach(s=>{let t=this.getValue("param",s)||"";if(!t||e.has(t))return;let a=this._getParamCurrentValue(t);this._params[t]=a,a&&this._updateArgInDOM(t,a),e.add(t)})}_debouncedUpdateAllArgs=g((e,s)=>{e&&(this._updateArgInDOM(e,s),this._updateQEvalResult(),this._dispatchParamsChanged())},50);_dispatchParamsChanged(){!this._funcName||!this._pkgPath||this.dispatch("params:changed",{pkgPath:this._pkgPath,funcName:this._funcName,params:{...this._params},send:this.sendValue||void 0})}_updateArgInDOM(e,s){let t=m(s);this.getTargets("arg").filter(o=>this.getValue("arg",o)===e).forEach(o=>{o.textContent=t||""});let a=this.getTarget("function-execute"),r=this.getTarget("function-anchor");if(!a&&!r)return;let i=a?.getAttribute("action")||r?.getAttribute("data-copy-text-value");if(!i)return;let n=i.split("&"),c=encodeURIComponent(s),d=n.findIndex((o,h)=>h>0&&o.startsWith(`${e}=`));d!==-1?n[d]=`${e}=${c}`:n.push(`${e}=${c}`);let u=n.join("&");a?.setAttribute("action",u),r?.setAttribute("data-copy-text-value",u)}async _updateQEvalResult(){let e=this.getTarget("qeval-result");if(!e)return;let s=this.getTargets("arg");if(!s.every(n=>n.textContent!=="")){e.textContent="(enter param values)",e.classList.remove("u-color-danger");return}let a=s.map(n=>n.textContent.replace(/\\(.)/g,"$1")).join(","),r=`${this._funcName}(${a})`,i=await this._evalExpression(r);e.textContent=i,e.classList.toggle("u-color-danger",i.startsWith("Error:"))}async _evalExpression(e){try{let s=await fetch("/_/api/eval",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({pkg_path:this._pkgPath,expression:e})});if(!s.ok)return"";let t=await s.json();return t.error?`Error: ${t.error}`:t.result??""}catch{return""}}updateAllArgs(e){let s=e.target,t=this.getValue("param",s);if(!t)return;let a=this._getParamCurrentValue(t);this._params[t]=a,this._debouncedUpdateAllArgs(t,a)}updateAllFunctionsSend(e){let s=e.params?.send||!1;this.sendValue=s?this.getValue("send"):null,this.getDOMArray("send-code").forEach(t=>{t.textContent=this.sendValue||""}),this._dispatchParamsChanged()}};export{l as ActionFunctionController};
From e16532d2a80dca042c2f8c06b150737a8499b949 Mon Sep 17 00:00:00 2001
From: jeronimoalbi <894299+jeronimoalbi@users.noreply.github.com>
Date: Fri, 24 Apr 2026 10:11:22 +0200
Subject: [PATCH 20/40] fix(gnoweb): remove unused argument from
`SecureHeadersMiddleware()`
---
gno.land/cmd/gnoweb/main.go | 5 ++---
gno.land/cmd/gnoweb/main_test.go | 4 ++--
2 files changed, 4 insertions(+), 5 deletions(-)
diff --git a/gno.land/cmd/gnoweb/main.go b/gno.land/cmd/gnoweb/main.go
index e0d43dcf327..0f7a500d755 100644
--- a/gno.land/cmd/gnoweb/main.go
+++ b/gno.land/cmd/gnoweb/main.go
@@ -274,7 +274,7 @@ func setupWeb(cfg *webCfg, _ []string, io commands.IO) (func() error, error) {
logger.Info("Running", "listener", bindaddr.String())
// Setup security headers
- secureHandler := SecureHeadersMiddleware(app, !cfg.noStrict, appcfg.NodeRemote)
+ secureHandler := SecureHeadersMiddleware(app, !cfg.noStrict)
// Setup server
server := &http.Server{
@@ -331,7 +331,7 @@ func parseAliases(aliasesStr string) (map[string]gnoweb.AliasTarget, error) {
return aliases, nil
}
-func SecureHeadersMiddleware(next http.Handler, strict bool, remote string) http.Handler {
+func SecureHeadersMiddleware(next http.Handler, strict bool) http.Handler {
// Build img-src CSP directive
imgSrc := "'self' data:"
@@ -345,7 +345,6 @@ func SecureHeadersMiddleware(next http.Handler, strict bool, remote string) http
csp := fmt.Sprintf(
"default-src 'self'; script-src 'self' https://sa.gno.services; style-src 'self'; img-src %s; font-src 'self'; form-action 'self'",
imgSrc,
- remote,
)
return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
diff --git a/gno.land/cmd/gnoweb/main_test.go b/gno.land/cmd/gnoweb/main_test.go
index 13ef29121ca..eae06873317 100644
--- a/gno.land/cmd/gnoweb/main_test.go
+++ b/gno.land/cmd/gnoweb/main_test.go
@@ -83,7 +83,7 @@ func dummyHandler(w http.ResponseWriter, r *http.Request) {
}
func TestSecureHeadersMiddlewareStrict(t *testing.T) {
- handler := SecureHeadersMiddleware(http.HandlerFunc(dummyHandler), true, "http://example.com")
+ handler := SecureHeadersMiddleware(http.HandlerFunc(dummyHandler), true)
req := httptest.NewRequest("GET", "http://example.com", nil)
rec := httptest.NewRecorder()
@@ -119,7 +119,7 @@ func TestSecureHeadersMiddlewareStrict(t *testing.T) {
}
func TestSecureHeadersMiddlewareNonStrict(t *testing.T) {
- handler := SecureHeadersMiddleware(http.HandlerFunc(dummyHandler), false, "http://example.com")
+ handler := SecureHeadersMiddleware(http.HandlerFunc(dummyHandler), false)
req := httptest.NewRequest("GET", "http://example.com", nil)
rec := httptest.NewRecorder()
From 8ababeb995499a35e2740398b740895e524854f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jer=C3=B3nimo=20Albi?=
<894299+jeronimoalbi@users.noreply.github.com>
Date: Tue, 28 Apr 2026 10:22:17 +0200
Subject: [PATCH 21/40] feat(gnoweb): consolidate built-in playground UI
(#5565)
Addresses milestone 0 (M0) from #5549
---------
Co-authored-by: Alexis Colin
---
gno.land/pkg/gnoweb/components/ui/icons.html | 2 +-
gno.land/pkg/gnoweb/components/view_run.go | 15 +-
.../pkg/gnoweb/components/views/eval.html | 37 +--
.../gnoweb/components/views/playground.html | 27 +-
gno.land/pkg/gnoweb/components/views/run.html | 70 ++---
.../pkg/gnoweb/frontend/css/06-blocks.css | 144 ++++++++--
.../pkg/gnoweb/frontend/js/controller-eval.ts | 187 ++++++-------
.../frontend/js/controller-playground.ts | 262 ++++++++++--------
.../pkg/gnoweb/frontend/js/controller-run.ts | 234 ++++++++--------
gno.land/pkg/gnoweb/handler_playground.go | 7 -
.../pkg/gnoweb/public/js/controller-eval.js | 2 +-
.../gnoweb/public/js/controller-playground.js | 27 +-
.../pkg/gnoweb/public/js/controller-run.js | 11 +-
gno.land/pkg/gnoweb/public/main.css | 4 +-
14 files changed, 561 insertions(+), 468 deletions(-)
diff --git a/gno.land/pkg/gnoweb/components/ui/icons.html b/gno.land/pkg/gnoweb/components/ui/icons.html
index af85218b2d8..8b96a209e7d 100644
--- a/gno.land/pkg/gnoweb/components/ui/icons.html
+++ b/gno.land/pkg/gnoweb/components/ui/icons.html
@@ -238,4 +238,4 @@
d="M4 22C4 17.5817 7.58172 14 12 14C16.4183 14 20 17.5817 20 22H18C18 18.6863 15.3137 16 12 16C8.68629 16 6 18.6863 6 22H4ZM12 13C8.685 13 6 10.315 6 7C6 3.685 8.685 1 12 1C15.315 1 18 3.685 18 7C18 10.315 15.315 13 12 13ZM12 11C14.21 11 16 9.21 16 7C16 4.79 14.21 3 12 3C9.79 3 8 4.79 8 7C8 9.21 9.79 11 12 11Z" />
-{{ end }}
\ No newline at end of file
+{{ end }}
diff --git a/gno.land/pkg/gnoweb/components/view_run.go b/gno.land/pkg/gnoweb/components/view_run.go
index 9a543278326..d6a990aa886 100644
--- a/gno.land/pkg/gnoweb/components/view_run.go
+++ b/gno.land/pkg/gnoweb/components/view_run.go
@@ -18,19 +18,6 @@ func (d RunData) PkgAlias() string {
return path.Base(d.PkgPath)
}
-type runViewParams struct {
- RunData
- Article ArticleData
-}
-
func RunView(data RunData) *View {
- content := NewTemplateComponent("renderRunContent", data)
- viewData := runViewParams{
- RunData: data,
- Article: ArticleData{
- ComponentContent: content,
- Classes: "c-run-view",
- },
- }
- return NewTemplateView(RunViewType, "renderRun", viewData)
+ return NewTemplateView(RunViewType, "renderRun", data)
}
diff --git a/gno.land/pkg/gnoweb/components/views/eval.html b/gno.land/pkg/gnoweb/components/views/eval.html
index 31aa495721c..5cf0ad9679e 100644
--- a/gno.land/pkg/gnoweb/components/views/eval.html
+++ b/gno.land/pkg/gnoweb/components/views/eval.html
@@ -1,7 +1,11 @@
{{/* ===================================================================================
-LAYOUT - Eval view wrapper
+LAYOUT - Eval view
=================================================================================== */}}
{{ define "renderEval" }}
+
+
{{ with render .ComponentTOC }}
{{ template "layout/aside" . }}
@@ -22,10 +26,9 @@
data-eval-pkg-path-value="{{ .PkgPath }}"
data-eval-domain-value="{{ .Domain }}">
-
+
+ Evaluate read-only expressions against {{ .PkgPath }}
+
@@ -36,7 +39,7 @@
Expression Evaluator
placeholder='Render("")' class="u-font-mono"
autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" />
-