From @padraicbc

A lot of files are getting rebuilt each time outside of the one actually saved/changed so it may be worth looking at incremental changes based on actual files with new content. That will reduce build times in production especially with large sites.

https://github.com/zeit/pkg

Should:

• [x] Not require devs to have nodejs installed on their computer
• [x] Not require internet access to start new project (currently runs npm install)
• [ ] Still be extensible via NPM
• [x] Still allow custom Gopack package to create web_modules for ESM

I'm putting this issue here as a placeholder for when someone inevitable hits it. In release v0.2.39 we modified the svelte node_module in order to work with plenti's new hydration setup. You need that modified version in order to have things work properly.

What you may experience: On the initial page load, when plenti tries to hydrate the static HTML, some of the content will be removed. Then if you try to navigate to other pages, the navbar will remain but all the content will be gone.

What is causing this: This is happening because we're trying to hydrate the document which isn't currently supported by Svelte. You're likely using the standard version of Svelte because you ran an npm update or something similar. If you're using the modified node_modules/svelte/internal/index.mjs that ships with Plenti, you should not experience this issue.

Long-term fix: You will continue to hit this if you try to update Svelte to a newer version using NPM because the standard lib does not have the fix. We have an open issue to discuss this with the maintainers, so hopefully future versions will accommodate this: https://github.com/sveltejs/svelte/issues/5547. If the proposal is rejected I will have to create a custom injection (likely in cmd/gopack.go or cmd/npm_defaults.go) to add this, but it's not ideal given changing versions of svelte.

Here are the console errors you will see:

• Firefox: DOMException: Node.insertBefore: Cannot have more than one Element child of a Document
• Chrome: DOMException: Failed to execute 'insertBefore' on 'Node': Only one element on document allowed.

Loading a site results in a flash of content and thereby a bad cumulative layout shift. I suspect the hydration to be responsible for that.

Edit: See the second screenshot in Lighthouse where the content is gone

Picking up the discussion on themes started here: https://github.com/plentico/plenti/issues/19

It would be nice to have a command for adding themes, for example: plenti new theme [email protected]:jimafisk/my-theme.git. This should download the git repo into a themes/ folder and could even make an entry in plenti.json in order to keep track of what theme is currently being used + could allow checking for updates on the remote repo.

Maybe also add a flag to the new site command, e.g. plenti new site MY_SITE --theme=REPO.git. This should run the --bare flag in the background.

When I run plenti new site my-site [email protected]:plenti-themes/bigspring it throws:

022/03/18 17:20:07 errs.go:57: Can't clone theme repository: unable to find any valid known_hosts file, set SSH_KNOWN_HOSTS env variable
unable to find any valid known_hosts file, set SSH_KNOWN_HOSTS env variable (File: /home/runner/work/plenti/plenti/cmd/theme_add.go, Line: 75)
2022/03/18 17:20:07 errs.go:57: Can't get HEAD: reference not found
reference not found (File: /home/runner/work/plenti/plenti/cmd/theme_add.go, Line: 84)
panic: runtime error: invalid memory address or nil pointer dereference
[signal SIGSEGV: segmentation violation code=0x1 addr=0x18 pc=0x985965]

goroutine 1 [running]:
github.com/go-git/go-git/v5/plumbing.(*Reference).Hash(...)
	/home/runner/go/pkg/mod/github.com/go-git/go-git/[email protected]/plumbing/reference.go:183
github.com/plentico/plenti/cmd.getCommitHash(0xc0001a9c80, 0x18, 0x7fff9711615f)
	/home/runner/work/plenti/plenti/cmd/theme_add.go:87 +0x125
github.com/plentico/plenti/cmd.glob..func6(0x2404c00, 0xc00007d6c0, 0x1, 0x2)
	/home/runner/work/plenti/plenti/cmd/site.go:103 +0x4b8
github.com/spf13/cobra.(*Command).execute(0x2404c00, 0xc00007d6a0, 0x2, 0x2, 0x2404c00, 0xc00007d6a0)
	/home/runner/go/pkg/mod/github.com/spf13/[email protected]/command.go:856 +0x2c2
github.com/spf13/cobra.(*Command).ExecuteC(0x2404700, 0xc000000180, 0x200000003, 0xc000000180)
	/home/runner/go/pkg/mod/github.com/spf13/[email protected]/command.go:960 +0x375
github.com/spf13/cobra.(*Command).Execute(...)
	/home/runner/go/pkg/mod/github.com/spf13/[email protected]/command.go:897
github.com/plentico/plenti/cmd.Execute()
	/home/runner/work/plenti/plenti/cmd/root.go:58 +0x31
main.main()
	/home/runner/work/plenti/plenti/main.go:7 +0x25

I thought it might be because I didn't have an SSH key uploaded to GitHub, but the problem still persists even after adding it.

Possibly related to https://github.com/src-d/go-git/issues/454

@brikou's first impression of lack of hot reloading:

I've updated foo/layout/content/index.svelte to see a change... but I miss hot reload. Let's hit F5. Ok it is updated :). Maybe I can use snowpack to act as a proxy to enable hot reload

I expect others feel the same way. It might be difficult with Plenti's custom architecture to rig this up yourself with snowpack, but if anyone knows how to do it, I'd love to hear about it. This is something I'd like to see in the project eventually, but it's low on my priority list at the moment.

From the docs

We also use a simple JSON data source instead of markdown, because we don't intend for you to edit content directly through files.

Does that mean there will not be one?

Error messages could be substantially improved.

Generally, there is reference to where the error occurred - ie which component

In addition, sometimes errors are reported and they are not valid. For example: Can't render htmlComponent: ReferenceError: layout_components_Led_svelteMatrix is not defined Can't render htmlComponent: ReferenceError: layout_components_Led_svelteMatrix is not defined Total build took 475.769705ms

I have a LedMatrix.svelte file in my project (why is it reference in the error) and I can make changes to that file, it compiles fine and is used with the changes reflected in the browser

I included all the components in the components folder. (it is not pretty yet... just working on functionality)

components.zip

We're still relying on a quick fix during the SSR'ing of cmd/build/client.go to change variables into a component signature that can be reliably referenced by other components: https://github.com/plentico/plenti/blob/6312546fc31615396dcd51fab6acaec2e3b47230/cmd/build/client.go#L152

The problem is, we're assuming that everything with the original variable name and space on either side of it is a reference to that original variable. However, there could simply be other strings with the same text that shouldn't be replaced. A good example came to light when looking into stores. The variable name in the example is count but the title where it's displayed also contains the text "count." When the page hydrates, the client display looks fine:

...but if JS is disabled (or still loading) it's not:

We should use regex to make this replacement more precise and avoid these accidental string changes.

There are scenarios where you might want to save some public data to JSON (delivered clientside) but also save some private data to a third-party backend (like https://pocketbase.io/). The reason being you still want specific endpoints with HTML fallbacks for faster page loads and SEO, but you also have protected info that should only be shared with those who have the appropriate access.

For example: You have events on your site that you display publicly, but you want to save additional information for the event such as a virtual meeting link that should remain private unless a user registers and pays for the event.

Currently you have to make a choice between SSR (all public via Plenti) or full CSR (blank page that loads in data from your backend via JS). It would be nice to allow a hybrid approach, but it's challenging to do this in a nonprescriptive way that allows for developer choice of backend setup.

To start, I think we'd need a persistent ID to tie the frontend to the backend. We could create a new id type for _schema.json that generates a UUID if it's blank (i.e. on initial creation) and doesn't allow you to edit it through the visual editor (input would be disabled with maybe a button to copy the ID). This would save publicly like any other Plenti field so it persists and can be used to load backend data for the private fields.

When uploading new images, if pane changes (e.g. switch to code view then go back to visual mode, or collapsing the current component) the image disappears. The image reappears if you expand the component where the image swap took place. This is because we're running a Svelte on:error in the visual editor and swapping out the image path (which doesn't exist on the server yet) with an encoded data image that was generated from the file uploaded from your local computer.

plenti serve currently exits when it encounters a build error. This is quite unconventional, as other tools behave differently in this case.

When a build error happens, instead of exiting, Plenti should render a HTML page of the error, and continue watching for file changes. When a file is changed, automatically rebuild, then serve the new version (or, in case of another error, serve the new error as HTML). This is what most web frameworks/SSGs are doing.

There are several issues (both open and closed) in this repo, regarding npm package support. What is the progress? Is it usable currently? Please document it somewhere.

A security fix breaks the build of the site.

1. Generate a package lock file by installing a library, e.g. stylus, or just generate it without installing any package: npm i --package-lock-only
npm will warn you about a security vulnerability found in Svelte
2. Run npm audit fix
3. The build fails without explanation. The fix is a minor semver bump, so it shouldn't cause breaking changes.

The error message is nonsense, and even worse, the failed build is served by plenti serve, so it's harder to notice. I have spent at least an hour debugging it, because I noticed it too late, after I have modifyed bigger amount of code. I couldn't find it with git bisect, because I didn't reinstall the dependencies.

Is it possible to detect if the component is live, or being pre-rendered? This would be used to:

• render noscript fallbacks in the pre-rendered document
• avoid pre-rendering bandwidth-heavy elements in order to speed up loading the components (because the page is not interactive until the components are loaded, and also #239)
• avoid loading images in pre-rendered document because of #238
• render only a loading screen in the pre-rendered document if interactivity is a must

Some examples

Loading screen:

{#if plenti.prerender}
  <h1>Loading...</h1>
{:else}
  <p>{description}</p>
{/if}
</div>

Placeholder instead of image, to speed up Svelte components loading:

{#if plenti.prerender}
  <div> class="img-placeholder"></div>
{:else}
  <img src={image_src}>
{/if}

If the user scrolls the pre-rendered page while the Svelte components are still loading, the document jumps to the top when the loading is finished, and the pre-rendered document is swapped with the Svelte version.

One possible solution I can think of is to save the position before swapping, and use window.scrollTo() immediately after hydrating is finished.