set up for context

This commit is contained in:
Adam 2023-04-21 08:32:26 -04:00
parent 349cfe074a
commit d3e0ecb0a7
16 changed files with 207 additions and 268 deletions

View file

@ -12,7 +12,7 @@
"postcss": "^8.4.23",
"solid-start-node": "^0.2.26",
"typescript": "^4.9.5",
"vite": "^4.3.0"
"vite": "^4.3.1"
},
"dependencies": {
"@deck.gl/layers": "^8.9.8",
@ -25,7 +25,7 @@
"solid-js": "^1.7.3",
"solid-map-gl": "^1.7.2",
"solid-start": "^0.2.26",
"undici": "^5.21.2"
"undici": "^5.22.0"
},
"engines": {
"node": ">=16.8"

View file

@ -30,10 +30,10 @@ dependencies:
version: 1.7.2(empty-npm-package@1.0.0)
solid-start:
specifier: ^0.2.26
version: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0)
version: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1)
undici:
specifier: ^5.21.2
version: 5.21.2
specifier: ^5.22.0
version: 5.22.0
devDependencies:
'@types/node':
@ -47,13 +47,13 @@ devDependencies:
version: 8.4.23
solid-start-node:
specifier: ^0.2.26
version: 0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0)
version: 0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1)
typescript:
specifier: ^4.9.5
version: 4.9.5
vite:
specifier: ^4.3.0
version: 4.3.0(@types/node@18.15.12)
specifier: ^4.3.1
version: 4.3.1(@types/node@18.15.12)
packages:
@ -3097,7 +3097,7 @@ packages:
'@babel/types': 7.21.4
solid-js: 1.7.3
/solid-start-node@0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0):
/solid-start-node@0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1):
resolution: {integrity: sha512-8vciTGoQV+lIlCUSVHJPazlaoKDRfBowDkPeBr/EZdmtbcMOKoJYf/APPQWFspylF+nhzunMf0+zJP90VtMEYg==}
peerDependencies:
solid-start: '*'
@ -3111,14 +3111,14 @@ packages:
polka: 1.0.0-next.22
rollup: 3.20.6
sirv: 2.0.2
solid-start: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0)
solid-start: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1)
terser: 5.17.1
undici: 5.21.2
vite: 4.3.0(@types/node@18.15.12)
undici: 5.22.0
vite: 4.3.1(@types/node@18.15.12)
transitivePeerDependencies:
- supports-color
/solid-start@0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.0):
/solid-start@0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.3.1):
resolution: {integrity: sha512-kne2HZlnSMzsirdnvNs1CsDqBl0L0uvKKt1t4de1CH7JIngyqoMcER97jTE0Ejr84KknANaKAdvJAzZcL7Ueng==}
hasBin: true
peerDependencies:
@ -3181,12 +3181,12 @@ packages:
set-cookie-parser: 2.6.0
sirv: 2.0.2
solid-js: 1.7.3
solid-start-node: 0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.3.0)
solid-start-node: 0.2.26(solid-start@0.2.26)(undici@5.22.0)(vite@4.3.1)
terser: 5.17.1
undici: 5.21.2
vite: 4.3.0(@types/node@18.15.12)
vite-plugin-inspect: 0.7.23(rollup@3.20.6)(vite@4.3.0)
vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.3.0)
undici: 5.22.0
vite: 4.3.1(@types/node@18.15.12)
vite-plugin-inspect: 0.7.23(rollup@3.20.6)(vite@4.3.1)
vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.3.1)
wait-on: 6.0.1(debug@4.3.4)
transitivePeerDependencies:
- supports-color
@ -3302,9 +3302,9 @@ packages:
hasBin: true
dev: true
/undici@5.21.2:
resolution: {integrity: sha512-f6pTQ9RF4DQtwoWSaC42P/NKlUjvezVvd9r155ohqkwFNRyBKM3f3pcty3ouusefNRyM25XhIQEbeQ46sZDJfQ==}
engines: {node: '>=12.18'}
/undici@5.22.0:
resolution: {integrity: sha512-fR9RXCc+6Dxav4P9VV/sp5w3eFiSdOjJYsbtWfd4s5L5C4ogyuVpdKIVHeW0vV1MloM65/f7W45nR9ZxwVdyiA==}
engines: {node: '>=14.0'}
dependencies:
busboy: 1.6.0
@ -3356,7 +3356,7 @@ packages:
resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
engines: {node: '>= 0.8'}
/vite-plugin-inspect@0.7.23(rollup@3.20.6)(vite@4.3.0):
/vite-plugin-inspect@0.7.23(rollup@3.20.6)(vite@4.3.1):
resolution: {integrity: sha512-VodzewpE9ufA8aPQhzTihbiMKAJ1aFoXNe+BB/3L52HB4Hf7I2WEOc1Yu4BC45rvw2VFuVnlXYlXL7JVQuseUw==}
engines: {node: '>=14'}
peerDependencies:
@ -3368,12 +3368,12 @@ packages:
fs-extra: 11.1.1
picocolors: 1.0.0
sirv: 2.0.2
vite: 4.3.0(@types/node@18.15.12)
vite: 4.3.1(@types/node@18.15.12)
transitivePeerDependencies:
- rollup
- supports-color
/vite-plugin-solid@2.7.0(solid-js@1.7.3)(vite@4.3.0):
/vite-plugin-solid@2.7.0(solid-js@1.7.3)(vite@4.3.1):
resolution: {integrity: sha512-avp/Jl5zOp/Itfo67xtDB2O61U7idviaIp4mLsjhCa13PjKNasz+IID0jYTyqUp9SFx6/PmBr6v4KgDppqompg==}
peerDependencies:
solid-js: ^1.7.2
@ -3386,13 +3386,13 @@ packages:
merge-anything: 5.1.4
solid-js: 1.7.3
solid-refresh: 0.5.2(solid-js@1.7.3)
vite: 4.3.0(@types/node@18.15.12)
vitefu: 0.2.4(vite@4.3.0)
vite: 4.3.1(@types/node@18.15.12)
vitefu: 0.2.4(vite@4.3.1)
transitivePeerDependencies:
- supports-color
/vite@4.3.0(@types/node@18.15.12):
resolution: {integrity: sha512-JTGFgDh3dVxeGBpuQX04Up+JZmuG6wu9414Ei36vQzaEruY/M4K0AgwtuB2b4HaBgB7R8l+LHxjB0jcgz4d2qQ==}
/vite@4.3.1(@types/node@18.15.12):
resolution: {integrity: sha512-EPmfPLAI79Z/RofuMvkIS0Yr091T2ReUoXQqc5ppBX/sjFRhHKiPPF/R46cTdoci/XgeQpB23diiJxq5w30vdg==}
engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true
peerDependencies:
@ -3423,7 +3423,7 @@ packages:
optionalDependencies:
fsevents: 2.3.2
/vitefu@0.2.4(vite@4.3.0):
/vitefu@0.2.4(vite@4.3.1):
resolution: {integrity: sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==}
peerDependencies:
vite: ^3.0.0 || ^4.0.0
@ -3431,7 +3431,7 @@ packages:
vite:
optional: true
dependencies:
vite: 4.3.0(@types/node@18.15.12)
vite: 4.3.1(@types/node@18.15.12)
/vt-pbf@3.1.3:
resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}

View file

@ -1,9 +1,7 @@
import MapGL, { Viewport, Camera } from 'solid-map-gl';
import { createSignal, Show, Suspense, createEffect, createResource, For, Accessor } from 'solid-js';
import { useRouteData } from 'solid-start';
import { createSignal, Show} from 'solid-js';
import * as maplibre from 'maplibre-gl';
import MapControls from './MapControls';
import { createStore } from 'solid-js/store';
// deck.gl
import { unstable_clientOnly } from 'solid-start';
@ -12,69 +10,21 @@ const MapArcLayer = unstable_clientOnly(() => import('~/components/MapArcLayer')
import type { JSX } from 'solid-js';
import type { MapOptions } from 'maplibre-gl';
import type { StyleSpecification } from 'maplibre-gl';
import 'maplibre-gl/dist/maplibre-gl.css';
import * as MAP_STYLE from '~/style.json';
import styleJson from '~/style.json';
import type { ArcLayer, ArcLayerProps } from '@deck.gl/layers/typed';
const MAP_STYLE: StyleSpecification = styleJson;
type ChargingStation = {
Name: string
PhoneNumer: string
IntersectionDirections: string
AccessTime: string
Connectors: string[]
Network: string
Pricing: string
RestrictedAccess: boolean
CntLevel2Chargers: number
CntLevel3Chargers: number
};
type Location = {
StreetAddresss: string
City: string
State: string
Country: string
Zip: string
GeocodeStatus: string
Coordinates: string
CoordinateString: string
Stations: ChargingStation[]
};
type StationRequest = {
Latitude: number
Longitude: number
Distance: number
CountLimit: number
};
type StationResponse = {
Dist: number
Loc: Location
}
const TEST = {
FAN: {
LngLatLike: { lng: -71.05625, lat: 42.36, },
coords: [-71.05625, 42.36]
},
GDT: {
LngLatLike: { lng: -71.056922, lat: 42.360919 },
coords: [-71.056922, 42.360919],
},
BBC: {
LngLatLike: { lng: -71.103, lat: 42.3145 },
coords: [-71.103, 42.3145],
},
GAR: {
LngLatLike: { lng: -71.062228, lat: 42.366303 },
coords: [-71.062228, 42.366303],
},
PRH: {
LngLatLike: { lng: -71.053678, lat: 42.363722 },
coords: [-71.053678, 42.363722],
},
NSE: {
LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 },
coords: [-74.0112660425065, 40.70689167578798],
},
FAN: { LngLatLike: { lng: -71.05625, lat: 42.36, }, coords: [-71.05625, 42.36] },
GDT: { LngLatLike: { lng: -71.056922, lat: 42.360919 }, coords: [-71.056922, 42.360919], },
BBC: { LngLatLike: { lng: -71.103, lat: 42.3145 }, coords: [-71.103, 42.3145], },
GAR: { LngLatLike: { lng: -71.062228, lat: 42.366303 }, coords: [-71.062228, 42.366303], },
PRH: { LngLatLike: { lng: -71.053678, lat: 42.363722 }, coords: [-71.053678, 42.363722], },
NSE: { LngLatLike: { lng: -74.0112660425065, lat: 40.70689167578798 }, coords: [-74.0112660425065, 40.70689167578798], },
};
const ARC_DATA = [
{ source: TEST.FAN.coords, target: TEST.GDT.coords },
@ -90,6 +40,18 @@ const SCAT_DATA = [
{ coordinates: TEST.PRH.coords },
{ coordinates: TEST.NSE.coords },
];
const BOS: Viewport = {
center: TEST.FAN.coords,
zoom: 15.5,
bearing: 160,
pitch: 60,
};
const NYC: Viewport = {
center: TEST.NSE.coords,
zoom: 15.5,
bearing: 10,
pitch: 60,
};
const USER_LOC = TEST.FAN.LngLatLike;
const INITIAL_VIEWPORT: Viewport = {
@ -105,46 +67,20 @@ const options: MapOptions = {
antialias: true,
renderWorldCopies: false,
};
const BOS: Viewport = {
center: TEST.FAN.coords,
zoom: 15.5,
bearing: 160,
pitch: 60,
};
const NYC: Viewport = {
center: TEST.NSE.coords,
zoom: 15.5,
bearing: 10,
pitch: 60,
};
const TEST_PACKET: StationRequest = {
Latitude: USER_LOC.lat,
Longitude: USER_LOC.lng,
Distance: 10,
CountLimit: 10,
}
async function fetchStations() {
const payload: RequestInit = {
method: "POST",
cache: 'default',
body: JSON.stringify(TEST_PACKET),
headers: { 'Content-Type': 'application/json' },
}
const response = await fetch("https://kevinfwu.com/getnearest", payload);
return await response.json() as StationResponse[];
};
function BadassMap(): JSX.Element {
const [stations] = createResource(fetchStations);
function BadassMap(props: any): JSX.Element {
const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEWPORT);
const [rotate, setRotate] = createSignal<boolean>(true);
const [scatData, setScatData] = createSignal(SCAT_DATA);
const [arcData, setArcData] = createSignal(ARC_DATA);
const toggleRotate = () => setRotate<boolean>(!rotate());
function flyTo(viewUpdate: Viewport) {
async function flyTo(viewUpdate: Viewport) {
setRotate<boolean>(false)
setViewport<Viewport>(viewUpdate);
};
function eventHandler(event: any) {
async function eventHandler(event: any) {
switch (event.type) {
case 'mousedown':
setRotate(false)
@ -161,40 +97,36 @@ function BadassMap(): JSX.Element {
};
};
return (
<MapGL
mapLib={maplibre}
options={options}
viewport={viewport()}
onViewportChange={(evt: Viewport) => setViewport(evt)}
onDrag={eventHandler}
onMouseDown={eventHandler}
onZoomStart={eventHandler}
onTouchStart={eventHandler}
transitionType="flyTo"
>
<MapScatLayer data={SCAT_DATA} />
<MapArcLayer data={ARC_DATA} />
<>
<MapGL
mapLib={maplibre}
options={options}
viewport={viewport()}
onViewportChange={(evt: Viewport) => setViewport(evt)}
onDrag={eventHandler}
onMouseDown={eventHandler}
onZoomStart={eventHandler}
onTouchStart={eventHandler}
transitionType="flyTo"
>
<MapScatLayer data={scatData()} />
<MapArcLayer data={arcData()} />
<Camera rotateViewport={rotate()} reverse={true} />
<Camera rotateViewport={rotate()} reverse={true} />
<ul> <li>
<Show when={rotate()}
fallback={<button onClick={toggleRotate}> Rotation On </button>} >
<ul> <li>
<Show when={rotate()}
fallback={<button onClick={toggleRotate}> Turn Rotation On </button>} >
<button onClick={toggleRotate}> Rotation Off </button> </Show> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
<li><button onClick={() => console.log(stations())}> log stations </button> </li>
<Suspense fallback={<li>Loading stations...</li>}>
<For each={stations()}>
{(station) => <li>{station.Dist}</li>}
</For>
</Suspense>
</ul>
<button onClick={toggleRotate}> Turn Rotation Off </button> </Show> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...BOS })}> Boston </button> </li>
<li><button onClick={() => flyTo({ ...viewport(), ...NYC })}> NYC </button> </li>
</ul>
<MapControls />
</MapGL >
);
<MapControls />
</MapGL >
</>
) as JSX.Element;
};
export default BadassMap;

View file

@ -1,20 +0,0 @@
.increment {
font-family: inherit;
font-size: inherit;
padding: 1em 2em;
color: #335d92;
background-color: rgba(68, 107, 158, 0.1);
border-radius: 2em;
border: 2px solid rgba(68, 107, 158, 0);
outline: none;
width: 200px;
font-variant-numeric: tabular-nums;
}
.increment:focus {
border: 2px solid #335d92;
}
.increment:active {
background-color: rgba(68, 107, 158, 0.2);
}

View file

@ -1,11 +0,0 @@
import { createSignal } from "solid-js";
import "./Counter.css";
export default function Counter() {
const [count, setCount] = createSignal(0);
return (
<button class="increment" onClick={() => setCount(count() + 1)}>
Clicks: {count()}
</button>
);
}

View file

@ -1,12 +1,10 @@
import { ArcLayer } from '@deck.gl/layers/typed';
import { MapboxLayer } from '@deck.gl/mapbox/typed';
import { ArcLayer } from '@deck.gl/layers/typed';
import { Layer } from 'solid-map-gl';
import type { JSX } from 'solid-js';
function MapArcLayer(props): JSX.Element {
function MapArcLayer(props: any) {
const arcLayer = new MapboxLayer({
id: 'deckgl-arc',
type: ArcLayer,
@ -17,12 +15,11 @@ function MapArcLayer(props): JSX.Element {
getTargetColor: [0, 230, 0],
getWidth: 6,
});
return (
<>
<Layer customLayer={arcLayer} />
</>
);
) as JSX.Element;
};
export default MapArcLayer;

View file

@ -8,12 +8,12 @@ import type {
import type { JSX } from 'solid-js';
function MapControls(): JSX.Element {
function MapControls() {
const NAV_OPTIONS: NavigationOptions = {
showCompass: true,
showZoom: true,
visualizePitch: true,
}
};
const GEO_OPTIONS: GeolocateOptions = {
positionOptions: {
enableHighAccuracy: false,
@ -24,15 +24,15 @@ function MapControls(): JSX.Element {
trackUserLocation: false,
showAccuracyCircle: false,
showUserLocation: true,
}
};
const ATTRIB_OPTIONS: AttributionOptions = {
compact: false,
customAttribution: 'OpenStreetMap',
}
};
const SCALE_OPTIONS: ScaleOptions = {
maxWidth: 100,
unit: 'imperial',
}
};
return (
<>
<Control
@ -56,8 +56,8 @@ function MapControls(): JSX.Element {
options={SCALE_OPTIONS}
/>
</>
)
}
) as JSX.Element;
};
export default MapControls;

View file

@ -3,11 +3,8 @@ import { MapboxLayer } from '@deck.gl/mapbox/typed';
import { Layer } from 'solid-map-gl';
import type { JSX } from 'solid-js';
import type { ScatterplotLayerProps } from '@deck.gl/layers/typed';
function MapScatLayer(props): JSX.Element {
function MapScatLayer(props: any) {
const scatterplotLayer = new MapboxLayer({
id: 'deckgl-scatterplot',
type: ScatterplotLayer,
@ -21,7 +18,7 @@ function MapScatLayer(props): JSX.Element {
<>
<Layer customLayer={scatterplotLayer} />
</>
);
) as JSX.Element;
};
export default MapScatLayer;

View file

@ -4,25 +4,28 @@ import { Layer } from 'solid-map-gl';
import type { JSX } from 'solid-js';
function MapScenegraphLayer(props): JSX.Element {
function MapScenegraphLayer(props: any) {
const scenegraphLayer = new MapboxLayer({
id: 'deckgl-arc',
id: 'deckgl-scenegraph',
type: ScenegraphLayer,
data: props.data,
getSourcePosition: (d: any) => d.source,
getTargetPosition: (d: any) => d.target,
getSourceColor: [200, 0, 0],
getTargetColor: [0, 230, 0],
getWidth: 6,
pickable: true,
scenegraph: 'https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/BoxAnimated/glTF-Binary/BoxAnimated.glb',
getPosition: d => d.coordinates,
getOrientation: d => [0, Math.random() * 180, 90],
_animations: {
'*': { speed: 5 }
},
sizeScale: 500,
_lighting: 'pbr'
});
return (
<>
<Layer customLayer={scenegraphLayer} />
</>
);
) as JSX.Element;
};
export default MapScenegraphLayer;

View file

@ -0,0 +1,64 @@
import { createContext, useContext, createResource } from "solid-js";
import type { JSX } from "solid-js";
type ChargingStation = {
Name: string
PhoneNumer: string
IntersectionDirections: string
AccessTime: string
Connectors: string[]
Network: string
Pricing: string
RestrictedAccess: boolean
CntLevel2Chargers: number
CntLevel3Chargers: number
};
type Location = {
StreetAddresss: string
City: string
State: string
Country: string
Zip: string
GeocodeStatus: string
Coordinates: string
CoordinateString: string
Stations: ChargingStation[]
};
type StationRequest = {
Latitude: number
Longitude: number
Distance: number
CountLimit: number
};
type StationResponse = {
Dist: number
Loc: Location
};
const USER_LOC = { lng: -71.05625, lat: 42.36, };
const TEST_PACKET: StationRequest = {
Latitude: USER_LOC.lat,
Longitude: USER_LOC.lng,
Distance: 10,
CountLimit: 10,
};
const StationsContext = createContext();
export function StationsProvider(props: any) {
const [stations] = createResource(async () => {
const response = await fetch("https://kevinfwu.com/getnearest", {
method: "POST",
cache: 'default',
body: JSON.stringify(TEST_PACKET),
headers: { 'Content-Type': 'application/json' }
}); return await response.json() as Promise<StationResponse[]>;
});
return (
<StationsContext.Provider value={stations()}>
{props.children}
</StationsContext.Provider>
) as JSX.Element;
};
export function getStations() { return useContext(StationsContext); };

View file

@ -1,8 +1,4 @@
import {
createHandler,
renderAsync,
StartServer,
} from "solid-start/entry-server";
import { createHandler, renderAsync, StartServer, } from "solid-start/entry-server";
export default createHandler(
renderAsync((event) => <StartServer event={event} />)

View file

@ -1,46 +1,30 @@
body {
background-color: #4C5270;
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
font-family: Gordita, Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
max-width: 300px;
margin: auto;
max-width: 300px;
}
a {
margin-right: 1rem;
margin-right: 1rem;
}
main {
text-align: center;
padding: 1em;
margin: 0 auto;
}
background-color: hsla(230, 19%, 17%, 0.6);
}
h1 {
color: #335d92;
text-transform: uppercase;
font-size: 4rem;
font-weight: 100;
line-height: 1.1;
margin: 1rem auto;
max-width: 14rem;
color: #36EEE0;
text-transform: uppercase;
font-size: 4rem;
font-weight: 300;
line-height: 1.1;
}
p {
max-width: 14rem;
margin: 2rem auto;
line-height: 1.35;
line-height: 1.35;
}
ul {
max-width: 7rem;
margin: auto;
}
@media (min-width: 480px) {
h1 {
max-width: none;
}
p {
max-width: none;
}

View file

@ -1,19 +1,9 @@
// @refresh reload
import { Suspense } from "solid-js";
import {
A,
Body,
ErrorBoundary,
FileRoutes,
Head,
Html,
Meta,
Routes,
Scripts,
Title,
} from "solid-start";
import { A, Body, ErrorBoundary, FileRoutes, Head, Html, Meta, Routes, Scripts, Title } from "solid-start";
import "./root.css";
import BadassMap from '~/components/BadassMap';
import BadassMap from './components/BadassMap';
import { StationsProvider } from "./components/StationsContext";
export default function Root() {
return (
@ -26,16 +16,18 @@ export default function Root() {
<Body>
<Suspense>
<ErrorBoundary>
<A href="/">Map</A>
<A href="/about">About</A>
<BadassMap />
<Routes>
<FileRoutes />
</Routes>
<StationsProvider>
<A href="/">Map</A>
<A href="/about">About</A>
<Routes>
<FileRoutes />
</Routes>
<BadassMap />
</StationsProvider>
</ErrorBoundary>
</Suspense>
<Scripts />
</Body>
</Html>
);
}
};

View file

@ -1,5 +1,6 @@
import { Title } from 'solid-start';
import Counter from "~/components/Counter";
import type { JSX } from 'solid-js';
export default function Home() {
return (
@ -55,5 +56,5 @@ export default function Home() {
</a>
</p>
</main>
);
) as JSX.Element;
}

View file

@ -1,9 +1,12 @@
import { Title } from "solid-start";
import { Title } from 'solid-start';
import { getStations } from '~/components/StationsContext';
import type { JSX } from 'solid-js';
export default function Home() {
return (
<main>
<Title>Ride the Lightning</Title>
</main>
);
}
) as JSX.Element;
};

View file

@ -2,6 +2,7 @@
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"resolveJsonModule": true,
"target": "ESNext",
"module": "ESNext",
"moduleResolution": "node",