profile
viewpoint

mateomorris/bored-or-confused 2

A tool for discreetly giving live feedback to an instructor while they're lecturing. Great for introverts.

mateomorris/frontback 1

Front-end issue submission for Gitlab and Trello

mateomorris/svelte 1

Cybernetically enhanced web apps

mateomorris/begin-app 0

Begin app

mateomorris/blockly 0

The web-based visual programming editor.

mateomorris/fontpair-api 0

An unofficial API built on top of FontPair

mateomorris/sapper 0

The next small thing in web development, powered by Svelte

mateomorris/www 0

Turn any website into data

push eventmateomorris/begin-app

Begin

commit sha 7ad5b12d43faed8f660c0572a1e8e9cfbb307ddb

ci: so it Begins!

view details

push time in 7 days

create barnchmateomorris/begin-app

branch : master

created branch time in 7 days

created repositorymateomorris/begin-app

Begin app

created time in 7 days

startedRich-Harris/svelte-workshop

started time in 21 days

startedsveltejs/integrations

started time in 25 days

startedmertJF/tailblocks

started time in a month

startedjawish/svelte-customelement-rollup

started time in a month

issue commentpikapkg/snowpack

Support "Base Imports"

import { sum } from 'utils/index'; // --> this works fine import { sum } from 'utils'; // --> this doesn't work when it probably should @Fabianopb I just realized the same thing. It looks like snowpack doesn't interpret index.js inside a directory the same way other bundlers do (but I'm still trying to find my footing so I could be wrong).

FredKSchott

comment created time in a month

startedpikapkg/snowpack

started time in a month

issue commentmobxjs/mobx

Codesandbox example broken

I don't know anything about MobX, just thought you might want to know so you don't turn off newcomers

mateomorris

comment created time in a month

startedbigskysoftware/htmx

started time in a month

issue openedmobxjs/mobx

Codesandbox example broken

It looks like the Codesandbox example in the Readme is broken. image

created time in a month

push eventmateomorris/sapper

mateomorris

commit sha 3506a5f1f49d61593dbe7faeeda3107abde19f0f

Update 06-server-side-rendering.md

view details

push time in a month

Pull request review commentsveltejs/sapper

Add example for importing client-side library

 Sapper, by default, renders server-side first (SSR), and then re-mounts any dyna  ### Making a component SSR compatible -Sapper works well with most third-party libraries you are likely to come across. However, sometimes, a third-party library comes bundled in a way which allows it to work with multiple different module loaders. Sometimes, this code creates a dependency on `window`, such as checking for the existence of `window.global` might do.+Sapper works well with most third-party libraries you are likely to come across. However, sometimes a third-party library depends on browser objects like `window` or `document`. -Since there is no `window` in a server-side environment like Sapper's, the action of simply importing such a module can cause the import to fail, and terminate the Sapper's server with an error such as:+Since there are no browser objects in a server-side environment like Sapper's, importing a module dependant on them can cause the import to fail and terminate the Sapper's server with an error such as:  ```bash ReferenceError: window is not defined ``` -The way to get around this is to use a dynamic import for your component, from within the `onMount` function (which is only called on the client), so that your import code is never called on the server.+The way to get around this is to dynamically import the library from within the `onMount` function (which is only called on the client) so that the import is never called on the server.++For example, importing and mounting [Quill.js](https://github.com/quilljs/quill/)  ```html <script>-	import { onMount } from 'svelte';--	let MyComponent;--	onMount(async () => {-		const module = await import('my-non-ssr-component');-		MyComponent = module.default;-	});+	import {onMount} from 'svelte'+        let editor

good catch

mateomorris

comment created time in a month

push eventmateomorris/sapper

mateomorris

commit sha b6a0208fe09ad190360c871d367a3fd871edd805

Update 06-server-side-rendering.md

view details

push time in a month

pull request commentsveltejs/sapper

Add example for importing client-side library

Thanks for the edit, that makes sense. Included your edits, cleaned up some verbiage, and removed the original example (since it's sounds like that's what you're advising).

mateomorris

comment created time in a month

push eventmateomorris/sapper

mateomorris

commit sha 9f298d4691323cd7a68a3684c30a1766ecb9c1d5

Update 06-server-side-rendering.md

view details

push time in a month

pull request commentsveltejs/sapper

Add example for importing client-side library

I understand. Now that I'm looking at it again, the section seems to be talking about two different uses for the dynamic import:

  1. Importing your own Svelte component which depends on browser objects (this is what the example is showing)
  2. Importing a third-party library which depends on browser objects ("Sapper works well with most third-party libraries you are likely to come across")

At the very least, I think the first example could be improved by referencing a Svelte component instead of my-ssr-component:

<script>
   import {onMount} from 'svelte'
   let MyComponent
	
   onMount(async() => {
	MyComponent = (await import('./MyComponent.svelte')).default
   })
	
</script>

<svelte:component this={MyComponent} />

And if it would be helpful (which I think it would be, especially for more junior devs), a minimal second example showing how to import/mount a library:

<script>
	import {onMount} from 'svelte'
	let Quill
	
	onMount(async() => {
		Quill = (await import('quill')).default
		new Quill('#editor')
	})
	
</script>

<div id="editor"></div>

https://svelte.dev/repl/5aaf090e2f83429a997eac91f6c39a3c?version=3.23.0

I hope I'm not belaboring the point, I'm just trying to make it a easier for newcomers to user Sapper because it's so amazing.

mateomorris

comment created time in a month

pull request commentsveltejs/sapper

Add example for importing client-side library

By 'client-side library' I mean a library intended to run in a browser which depends on window or document. The things you mentioned would be beneficial, but Quill and many other libraries can't be SSR'd at all because of those requirements.

But either way, I think it would be helpful to offer a better example for importing a client-side library since the current example unnecessarily uses <svelte:component> and imports my-ssr-component where importing/mounting an actual library would be more descriptive to a real-world application.

mateomorris

comment created time in a month

startedvisionmedia/page.js

started time in a month

startedProseMirror/prosemirror

started time in a month

startedthudfactor/fretr

started time in a month

startedtroy351/emmet-monaco-es

started time in 2 months

startedsveltech/routify

started time in 2 months

startedalpinejs/alpine

started time in 3 months

more