import std null build error gitrepostep about cosmic

[fubark]

I saw this recently with the latest stage3 compiler and I was able to run the zig build commands by appending -fstage1.

[thomas992]

I want to make a library that makes one user interface format for both HTML DOM and Cosmic WASM. I would think of it is a Mithril JS/DOM abstraction layer. Theoretically I should be able to make a social media site that works on Cosmic with legacy HTML support. Using the UI library I hope to make a simple calculator and a phone interface resembling that of an Amazon Kindle but the status bar is at the bottom and you pull it up to close the application one is in. Once 3d is working good, theoretically Astronomy Engine (cosinekitty) could start producing some accurate representation of the solar system. My questions are, does Cosmic want to support first person simulation in a representation of the solar system as standard to Cosmic? And does Cosmic want something like a Mithril JS abstraction to be standard?

[thomas992]

I want to point out I condense code a lot more than you do. I hope this would not be an issue

const std = @import("std"); const builtin = @import("builtin");
const IsWasm = builtin.target.isWasm(); const stdx = @import("stdx");
const platform = @import("platform"); const graphics = @import("graphics");
const Color = graphics.Color; const ui = @import("ui"); const w = ui.widgets;

const helper = @import("helper.zig"); const log = stdx.log.scoped(.main);

pub const App = struct { counter: u32,
    pub fn init(self: *App, _: *ui.InitContext) void { self.counter = 0; }
    pub fn build(self: *App, c: *ui.BuildContext) ui.FrameId {
        const S = struct { fn onClick(self_: *App, _: ui.MouseUpEvent) void {
                self_.counter += 1;}};
        return w.Center(.{}, 
            w.Row(.{}, &.{
                w.Padding(.{ .padding = 10, .pad_left = 30, .pad_right = 30 }, 
                    w.Text(.{ .text = c.fmt("{}", .{self.counter}), .color = Color.White})),
                w.TextButton(.{ .text = "Count", .onClick = c.funcExt(self, S.onClick),
                    .corner_radius = 10 }),}),);}};

var app: helper.App = undefined;

pub fn main() !void { // This is the app loop for desktop. For web/wasm see wasm exports below.
    try app.init("Counter"); defer app.deinit(); app.runEventLoop(update); }

fn update(delta_ms: f32) void { const S = struct {
        fn buildRoot(_: void, c: *ui.BuildContext) ui.FrameId { return c.build(App, .{}); } };
    const ui_width = @intToFloat(f32, app.win.getWidth());
    const ui_height = @intToFloat(f32, app.win.getHeight());
    app.ui_mod.updateAndRender(delta_ms, {}, S.buildRoot, ui_width, ui_height) catch unreachable; }

pub usingnamespace if (IsWasm) struct {
    export fn wasmInit() [*]const u8 { return helper.wasmInit(&app, "Counter"); }

    export fn wasmUpdate(cur_time_ms: f64, input_buffer_len: u32) [*]const u8 {
        return helper.wasmUpdate(cur_time_ms, input_buffer_len, &app, update); }

    export fn wasmDeinit() void { app.deinit(); stdx.wasm.deinit(); } 
} else struct {};

const std = @import("std"); const module = @import("module.zig");
const events = @import("events.zig"); const build = @import("build.zig");
const config = @import("config.zig"); const frame = @import("frame.zig");
const widget = @import("widget.zig"); pub const widgets = @import("widgets.zig");
const text = @import("text.zig"); const tween = @import("tween.zig");
pub const OverlayId = @import("widgets/root.zig").OverlayId;
///Module
pub const Module = module.Module; pub const Layout = module.Layout;
pub const TextMeasureId = module.TextMeasureId; pub const RenderContext = module.RenderContext;
pub const LayoutContext = module.LayoutContext; pub const InitContext = module.InitContext;
pub const ModuleContext = module.ModuleContext; pub const CommonContext = module.CommonContext;
pub const IntervalId = module.IntervalId; pub const WidgetProps = module.WidgetProps;
pub const SizeConstraints = module.SizeConstraints;
///Events
pub const Event = events.Event; pub const IntervalEvent = events.IntervalEvent;
pub const KeyDownEvent = events.KeyDownEvent; pub const KeyUpEvent = events.KeyUpEvent;
pub const MouseDownEvent = events.MouseDownEvent; pub const MouseUpEvent = events.MouseUpEvent;
pub const MouseMoveEvent = events.MouseMoveEvent; pub const MouseScrollEvent = events.MouseScrollEvent;
pub const HoverChangeEvent = events.HoverChangeEvent; pub const DragStartEvent = events.DragStartEvent;
pub const DragMoveEvent = events.DragMoveEvent; pub const EventContext = events.EventContext;
pub const EventResult = events.EventResult;
///Build, Config
pub const BuildContext = build.BuildContext; pub const PtrId = build.PtrId;
pub const Config = config.Config; pub const Import = config.Import;
///Frame
pub const Frame = frame.Frame; pub const FrameId = frame.FrameId;
pub const NullId = @import("std").math.maxInt(u32); pub const NullFrameId = frame.NullFrameId;
pub const FrameListPtr = frame.FrameListPtr; pub const FramePropsPtr = frame.FramePropsPtr;
pub const NoChild = NullId;
///Widget
pub const Node = widget.Node; pub const NodeRef = widget.NodeRef;
pub const NodeStateMasks = widget.NodeStateMasks; pub const EventHandlerMasks = widget.EventHandlerMasks;
pub const WidgetTypeId = widget.WidgetTypeId; pub const WidgetUserId = widget.WidgetUserId;
pub const WidgetKey = widget.WidgetKey; pub const WidgetKeyId = widget.WidgetKeyId;
pub const WidgetRef = widget.WidgetRef; pub const NodeRefMap = widget.NodeRefMap;
pub const BindNodeFunc = widget.BindNodeFunc; pub const WidgetVTable = widget.WidgetVTable;
pub const LayoutSize = widget.LayoutSize;
///Text, Tween
pub const TextMeasure = text.TextMeasure;
pub const Tween = tween.Tween; pub const SimpleTween = tween.SimpleTween;

///User Interface
pub const ExpandedWidth = std.math.inf_f32;
pub const ExpandedHeight = std.math.inf_f32;
pub const VAlign = enum(u2) { Top = 0, Center = 1, Bottom = 2, };
pub const HAlign = enum(u2) { Left = 0, Center = 1, Right = 2, };
/// FlexFit
/// Prefers to fit exactly the available space.
/// Prefers to wrap the child. If the available space is less than the child's dimension, prefers to fit the available space.
/// Like Shrink but in the case that the child size is less than the available space; instead of skipping the missing space to the next flex widget,
/// that missing space is given to the next flex widget, which can make the next flex widget bigger than it's calculated flex size.
pub const FlexFit = enum(u2) { Exact = 0, Shrink = 1, ShrinkAndGive = 2, };
pub const FlexInfo = struct { val: u32, fit: FlexFit, };
/// Create a declaration function for a Widget.
pub fn createDeclFn(comptime Widget: type) fn (*BuildContext, anytype) callconv(.Inline) FrameId {
    const S = struct { inline fn decl(c: *BuildContext, props: anytype) FrameId {
            return c.build(Widget, props);} }; return S.decl;}

It generally is half the length of the other code without being wider.

[fubark]

Seems you want to build an astronomy app using dom like widgets? I would love to see someone get started creating dom like widgets and in the process we can discover what we're missing in the ui lib. mythriljs is a reactive lib? If so it should share similar goals with our ui lib.

Are you asking if this code style is good for merging? I agree it's condensed but it's not very readable. It's better to follow the same conventions as the lib for readability and consistency.

[thomas992]

The long style code is fine. Mithril is a single page application, reactive, an alternative to JSX. I think the user should be able to import CSS from Javascript. Here is a basic outline of a Kindle UI

var House = { view: function() { return m("main", [ m("nav", [
  m("a", { class: "topbar", href: "#!/house" }, "House"),
  m("a", { class: "topbar", href: "#!/library" }, "Library") ] ),
 m("div", {id: "house"}, [
  m("p", "to-do!")]),
 m("footer", [
  m("p", { id: "clock" }, "15:45"),
  m("p", { id: "indicators" }, "to-do"),
   m("menu", { id: "expansion"},
    m("p", "Additional settings"))])])}}

the idea is to create a unique Mithril library into Cosmic that can read the same things and do routing the same way.

[fubark]

Interesting, so you want it to render html as a backend using the Cosmic widgets? That would be cool as well. A nice starting point I guess is to try getting one of the example apps to do that.

One of the things I want to add to cscript is to sugar function calls to look like declarative statements. This should make it easier to compose widgets:

using cs.widgets

count = 0

Widget:
  TextInput:
    .onChange: fun (val) => cs.log(val)
  Column:
    Row(flex: 1):
      TextButton('Count'):
        .onClick: fun (val) => count += 1
    Row(flex: 2):
      Canvas(width: 400, height: 300):
        .onRender = fun (ctx):
          ctx.rect(0, 0, 100, 100)

These element names are just functions that build up the model. Here's an example:

fun Canvas(width, height, onRender, @bodyArray children) Widget:
  // Build