Skip to content
This repository was archived by the owner on Oct 13, 2022. It is now read-only.

[WIP] experimental new structure #57

Merged
merged 3 commits into from
May 5, 2018
Merged

[WIP] experimental new structure #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
98813dd
experimental new structure
Rich-Harris May 5, 2018
56c7113
move some stuff into devDeps
Rich-Harris May 5, 2018
7f64e4c
update deps
Rich-Harris May 5, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions app/App.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<Nav page={
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Rich-Harris why the intensive props.path logic here? This seems very manifest-y, which goes against the grain of the automated path-finding you seem to support? What exactly is the function of these page props?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In other words, do I have to add to this for every page I add?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can pass props.path down to <Nav> instead (in fact, I prefer that — will change it)...

<Nav path={props.path}/>

...but yes, you have to explicitly pass stuff down, just like you used to have to explicitly pass down a page property via the <Layout> component in the previous template. How else will the nav bar know which option to mark as active?

props.path === '/' ? 'home' :
props.path === '/about' ? 'about' :
props.path.startsWith('/blog') ? 'blog' :
null
}/>

<main>
<svelte:component this={Page} {...props}/>
</main>

<style>
main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}
</style>

<script>
import Nav from '../components/Nav.html';

export default {
components: {
Nav
}
};
</script>
10 changes: 6 additions & 4 deletions app/client.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import { init } from 'sapper/runtime.js';
import { routes } from './manifest/client.js';
import App from './App.html';

// `routes` is an array of route objects injected by Sapper
init(document.querySelector('#sapper'), routes);

if (module.hot) module.hot.accept();
init({
target: document.querySelector('#sapper'),
routes,
App
});
6 changes: 5 additions & 1 deletion app/server.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,15 @@ import compression from 'compression';
import sapper from 'sapper';
import serve from 'serve-static';
import { routes } from './manifest/server.js';
import App from './App.html';

polka() // You can also use Express
.use(
compression({ threshold: 0 }),
serve('assets'),
sapper({ routes })
sapper({
routes,
App
})
)
.listen(process.env.PORT);
9 changes: 0 additions & 9 deletions assets/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,6 @@ body {
color: #333;
}

main {
position: relative;
max-width: 56em;
background-color: white;
padding: 2em;
margin: 0 auto;
box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
margin: 0 0 0.5em 0;
font-weight: 400;
Expand Down
0 routes/_components/Nav.html → components/Nav.html
View file
Open in desktop
File renamed without changes.
14 changes: 8 additions & 6 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,19 +6,21 @@
"dev": "sapper dev",
"build": "sapper build",
"export": "sapper export",
"start": "sapper start",
"start": "node build",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this correct? shouldn't this be npm build?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's correct, yeah — as of 0.11, Sapper creates a launcher file which defaults to build/index.js. So to run the app you just to node build

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This probably explains my problems w/ trying to build when upgrading Sapper. ;) Need to upgrade sapper-template too...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sapper start still works

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I got it all working.

"cy:run": "cypress run",
"cy:open": "cypress open",
"test": "run-p --race dev cy:run"
},
"dependencies": {
"compression": "^1.7.1",
"npm-run-all": "^4.1.2",
"polka": "^0.3.4",
"sapper": "^0.10.0",
"serve-static": "^1.13.1",
"sapper": "^0.12.0",
"serve-static": "^1.13.1"
},
"devDependencies": {
"npm-run-all": "^4.1.2",
"svelte": "^2.0.0",
"svelte-loader": "^2.3.3",
"webpack": "^4.1.0"
"svelte-loader": "^2.9.0",
"webpack": "^4.7.0"
}
}
18 changes: 3 additions & 15 deletions routes/4xx.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,9 @@
<title>Not found</title>
</svelte:head>

<Layout page='home'>
<h1>Not found</h1>
<h1>Not found</h1>

<p>Please check the URL</p>
</Layout>
<p>Please check the URL</p>

<style>
h1, p {
Expand All @@ -30,14 +28,4 @@ <h1>Not found</h1>
font-size: 4em;
}
}
</style>

<script>
import Layout from './_components/Layout.html';

export default {
components: {
Layout
}
};
</script>
</style>
16 changes: 2 additions & 14 deletions routes/5xx.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@
<title>Internal server error</title>
</svelte:head>

<Layout page='home'>
<h1>Internal server error</h1>
</Layout>
<h1>Internal server error</h1>

<style>
h1 {
Expand All @@ -21,14 +19,4 @@ <h1>Internal server error</h1>
font-size: 4em;
}
}
</style>

<script>
import Layout from './_components/Layout.html';

export default {
components: {
Layout
}
};
</script>
</style>
15 changes: 0 additions & 15 deletions routes/_components/Layout.html
View file
Open in desktop

This file was deleted.

16 changes: 2 additions & 14 deletions routes/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,18 +2,6 @@
<title>About</title>
</svelte:head>

<Layout page='about'>
<h1>About this site</h1>
<h1>About this site</h1>

<p>This is the 'about' page. There's not much here.</p>
</Layout>

<script>
import Layout from './_components/Layout.html';

export default {
components: {
Layout
}
};
</script>
<p>This is the 'about' page. There's not much here.</p>
16 changes: 4 additions & 12 deletions routes/blog/[slug].html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@
<title>{post.title}</title>
</svelte:head>

<Layout page='blog'>
<h1>{post.title}</h1>
<h1>{post.title}</h1>

<div class='content'>
{@html post.html}
</div>
</Layout>
<div class='content'>
{@html post.html}
</div>

<style>
/*
Expand Down Expand Up @@ -47,13 +45,7 @@ <h1>{post.title}</h1>
</style>

<script>
import Layout from '../_components/Layout.html';

export default {
components: {
Layout
},

preload({ params, query }) {
// the `slug` parameter is available because this file
// is called [slug].html
Expand Down
28 changes: 10 additions & 18 deletions routes/blog/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,17 @@
<title>Blog</title>
</svelte:head>

<Layout page='blog'>
<h1>Recent posts</h1>
<h1>Recent posts</h1>

<ul>
{#each posts as post}
<!-- we're using the non-standard `rel=prefetch` attribute to
tell Sapper to load the data for the page as soon as
the user hovers over the link or taps it, instead of
waiting for the 'click' event -->
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
{/each}
</ul>
</Layout>
<ul>
{#each posts as post}
<!-- we're using the non-standard `rel=prefetch` attribute to
tell Sapper to load the data for the page as soon as
the user hovers over the link or taps it, instead of
waiting for the 'click' event -->
<li><a rel='prefetch' href='blog/{post.slug}'>{post.title}</a></li>
{/each}
</ul>

<style>
ul {
Expand All @@ -24,13 +22,7 @@ <h1>Recent posts</h1>
</style>

<script>
import Layout from '../_components/Layout.html';

export default {
components: {
Layout
},

preload({ params, query }) {
return this.fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts };
Expand Down
26 changes: 7 additions & 19 deletions routes/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,14 @@
<title>Sapper project template</title>
</svelte:head>

<Layout page='home'>
<h1>Great success!</h1>
<h1>Great success!</h1>

<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>
<figure>
<img alt='Borat' src='great-success.png'>
<figcaption>HIGH FIVE!</figcaption>
</figure>

<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>
</Layout>
<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p>

<style>
h1, figure, p {
Expand Down Expand Up @@ -45,14 +43,4 @@ <h1>Great success!</h1>
font-size: 4em;
}
}
</style>

<script>
import Layout from './_components/Layout.html';

export default {
components: {
Layout
}
};
</script>
</style>