Issues running the demos

xoviat commented 2 years ago

It should be possible to run the demos within 3 minutes of cloning the project. In addition, re-running changes to the code should take less than 15 seconds, from saving the source file to refresh. Rapid iteration improves developer efficiency. If you are not getting these results, please ask questions/make comments here.

VinceJnz commented 2 years ago

Question ... Why is material storing data using javascript objects, e.g. MDC?

Wouldn't it be better to use Golang structures?

VinceJnz commented 2 years ago

I think understand why material is using javascript objects... This project is not trying to recreate material web components, but as noted in the ReadMe.md it is providing a Vecty binding. I didn't fully understand this.

So during initialization material-components-web is imported and used to set up the environment. This is done in base/tools base.AddResources()

xoviat commented 2 years ago

@VinceJnz There are some places in what I will call the presentation layer (the top folders) where data was stored as javascript objects which I am removing because I can't understand why those are present. However, the component layer (in components, copied from https://github.com/agamigo/material) interacts with the mdc libary.

This is done in base/tools base.AddResources()

Yes, I created this function so that the project could be compatible with gaepher. Because gaepher doesn't load any resources (because it is designed to be compatible with any golang wasm project), the app needs to load the resources that it needs on it's own. unpkg will usually be faster than even serving it alongside the app, because they have CDNs that are close to the user.

VinceJnz commented 2 years ago

@xoviat when I run the demos using gaepher and browse to the home page http://localhost:4000/ the browser fails to load the css and image files in the browser with the following errors in the browser console

12:32:38.868 The stylesheet http://localhost:4000/assets/styles/App.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.881 The stylesheet http://localhost:4000/assets/styles/HeaderBar.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.881 The stylesheet http://localhost:4000/assets/styles/ComponentPage.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.883 The stylesheet http://localhost:4000/assets/styles/ComponentCatalogPanel.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.891 The stylesheet http://localhost:4000/assets/styles/CatalogPage.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.896 The stylesheet http://localhost:4000/assets/styles/HeroComponent.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.904 The stylesheet http://localhost:4000/assets/styles/ImageListCatalog.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.914 The stylesheet http://localhost:4000/assets/styles/ButtonCatalog.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.915 The stylesheet http://localhost:4000/assets/styles/CheckboxCatalog.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.915 The stylesheet http://localhost:4000/assets/styles/ListCatalog.css was not loaded because its MIME type, “text/html”, is not “text/css”. 1.jpg
12:32:38.915 The stylesheet http://localhost:4000/assets/styles/MenuCatalog.css was not loaded because its MIME type, “text/html”, is not “text/css”.

I have tried different browsers and it makes no difference.

It appears that the server is not serving any of the asset files.

VinceJnz commented 2 years ago

When I make get request to http://localhost:4000/assets/styles/App.css with postman I get the following response:

<!-- This is the gaepher bootloader for golang wasm applications. -->

<!DOCTYPE html>

<head>
    <script src="/wasm_exec.js"></script>
    <script>
        (async () => {
            const resp = await fetch('/main.wasm');
            if (!resp.ok) {
                const pre = document.createElement('pre');
                pre.innerText = await resp.text();
                document.body.appendChild(pre);
                return;
            }
            const src = await resp.arrayBuffer();
            const go = new Go();
            const result = await WebAssembly.instantiate(src, go.importObject);
            go.run(result.instance);
        })();
    </script>
</head>

<body>
    <span style="position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%)">
        <img src="data:image/png;base64,%0aR0lGODl
...
...

It appears that gapher is not serving the css files correctly?

xoviat commented 2 years ago

@VinceJnz I cannot reproduce this error. Can you run go install bitbucket.org/xoviat/gaepher@bc4b841?

VinceJnz commented 2 years ago

Thanks, that fixed it. I must have had some other version installed.

vecty-components / material

Issues running the demos #45