profile
viewpoint
EECOLOR EECOLOR Kaliber Utrecht, Netherlands

EECOLOR/css-modules-loader-core 1

A loader-agnostic CSS Modules implementation, based on PostCSS

EECOLOR/embedded-spray 1

A small wrapper around spray http

EECOLOR/API-toolkit 0

Information about API best practices

EECOLOR/as3httpclient 0

Automatically exported from code.google.com/p/as3httpclient

EECOLOR/as3mp3streamplayer 0

Automatically exported from code.google.com/p/as3mp3streamplayer

EECOLOR/babel 0

:tropical_fish: Babel is a compiler for writing next generation JavaScript.

EECOLOR/browser-tests 0

An sbt test framework that runs tests in browsers

EECOLOR/cli-www 0

Website for the exercism CLI documentation.

EECOLOR/DefinitelyTyped 0

The repository for high quality TypeScript type definitions.

pull request commentkaliberjs/routing

First version

Great feedback. The example you posted however should not work as the library now requires a LocationProvider (see examples).

E.g., be exporting the LocationProvider.

In this version it is exported.

I'll look at the rest of your comments as soon as I have time.

EECOLOR

comment created time in 6 days

issue commentkaliberjs/build

Consider optionally listing of files per chunk in terminal

@JoostKiens you're welcome to submit a pull request

JoostKiens

comment created time in 8 days

PR opened kaliberjs/routing

First version

This pull request should lead to the first version. Any comments are welcome.

  • [ ] Make it work (it has some problems caused by refactoring)
  • [ ] Split 'basic' and 'route map' examples
  • [ ] Add nested example (utilizing basePath)
  • [ ] Provide access to the parent routes in 'route map' version
  • [ ] Add smarter * mapping in 'route map' (allows for more granual not found checking)
  • [ ] Add useRelativePickFromRouteMap (or something equivalent)
  • [ ] Add documentation
  • [ ] Disable default jsx-key and replace with a version that allows 'key-less' react elements in array literals (99% of the time these are tuples)
  • [ ] Deal with http and target='_blank' (rel="noopener noreferrer"`)
  • [ ] Write tests (only for the easily testable functionality at first)
+10451 -0

0 comment

32 changed files

pr created time in 13 days

PR closed kaliberjs/routing

initial sketch

This is a first sketch version. I mainly seek feedback for the example (the implementation is very rough and will change quite a bit).

Things I will would like to add for the first published version:

  • a way to remove duplication of the double route paths (can already be achieved by creating consts in a separate file)
  • (context aware) reverse routing
  • (context aware) route tree, a route definition that allows you to define metadata and data fetching
+10451 -0

5 comments

32 changed files

EECOLOR

pr closed time in 13 days

pull request commentkaliberjs/routing

initial sketch

Will re-open a new pull request

EECOLOR

comment created time in 13 days

pull request commentkaliberjs/routing

Route map

I will merge this and we can continue the discussion in a new pull request

EECOLOR

comment created time in 13 days

delete branch kaliberjs/routing

delete branch : route-map

delete time in 13 days

push eventkaliberjs/routing

EECOLOR

commit sha 4c805391025d501d83739500e17508f0f324e410

first sketch please do not look the code

view details

EECOLOR

commit sha 04c4e7fd35f9a84ed149c7e43ad406353206d8e3

more sketching Explored exhaustive /* routes based on children. It can be done. Most likely candidate is making `extractPath` return an array of all possible child routes (separated with /*). That requires a change in matching where /*abcdefg is treated differently from /*. We probably also need to change scoring to include length for equal scores (or use length as a base of the score).

view details

EECOLOR

commit sha 1dc974ff056794955d57eaf23f5b578d47506107

add relative pick

view details

EECOLOR

commit sha 2c22febf22a03b7919083bb43a37bdc2e5c0f583

first sketch with reverse routing

view details

EECOLOR

commit sha a5caa0c375ecef4a2658a2cabb036241e49d4e14

more sketching, making the language switch work

view details

EECOLOR

commit sha 4a073e6b901de3e857cf2248381f18c8e85eb36a

Simplification of the library - Route map is now a default (optional) integration - We explicitly require LocationProvider to prevent 'magic' - No more implicit LocationProviders

view details

EECOLOR

commit sha 6fb522bc3118627039096286dca5c73d63c21d5b

Update TODO's

view details

EECOLOR

commit sha ca55f2481ea642205e03a9cec3c51436d49fdbf7

Merge pull request #2 from kaliberjs/route-map Route map

view details

push time in 13 days

PR merged kaliberjs/routing

Reviewers
Route map

I'm exploring the concept of a route map. It might need some better explanation, but for now you can check the files in the example directory.

I have not correctly implemented the concept of a baseDir, basePath or publicPath, so ignore the hacks to get it working. The implementation is also very messy, so please don't look at it, haha.

Interesting showcases:

  • The pick function in index.html.js > Index.routes.match
  • Reverse routing in the links
  • Route matching in the different components
  • A way to tackle multiple paths per route (here indexed by language)
+565 -92

1 comment

9 changed files

EECOLOR

pr closed time in 13 days

push eventkaliberjs/routing

EECOLOR

commit sha 4a073e6b901de3e857cf2248381f18c8e85eb36a

Simplification of the library - Route map is now a default (optional) integration - We explicitly require LocationProvider to prevent 'magic' - No more implicit LocationProviders

view details

EECOLOR

commit sha 6fb522bc3118627039096286dca5c73d63c21d5b

Update TODO's

view details

push time in 13 days

issue closedfirebase/firebase-js-sdk

app.database() is not a function

Describe your environment

  • Operating System version: Ubuntu 20.04 LTS
  • Node version: v10.20.1
  • Firebase SDK version: 7.14.3+
  • Firebase Product: database

Describe the problem

After creating an app the database function does not exist. This is a regression, it worked in 7.14.2.

Steps to reproduce:

const app = firebase.initializeApp({
  databaseURL: `ws://localhost:5000`,
})

const db = app.database()

Error:

TypeError: app.database is not a function

Relevant Code:

You can use firebase-server to start a local server.

Problem can be seen by running yarn test on a checkout of https://github.com/kaliberjs/firebase-queue

closed time in a month

EECOLOR

issue commentfirebase/firebase-js-sdk

app.database() is not a function

@hsubox76 Thank you very much for investigating! I wished I thought about that being the problem myself. Thanks again!

EECOLOR

comment created time in a month

push eventkaliberjs/firebase-queue

EECOLOR

commit sha 10da6499296f21b1a660e35c61f425f2c980d949

chore: update dependencies

view details

push time in a month

Pull request review commentkaliberjs/routing

Route map

+/*+  Principles+  - Artibrary keys:+    - The structure should reflect path structure.+    - The names of the keys do not need to be the related to the actual paths, they are for the+      developers.+    - Paths change over time and should not result in changing the code.+    - Multiple paths can be attached to a single item (localization).+  - Central location of path related information (title, data, ...)+  - Allow segmentation (sub-objects available to sub-components)+  - Should be compatible with component thinking+*/+import { pick as originalPick } from './index'+import { interpolate, callOrReturn } from './matching'++const _ = Symbol('route')++export function asRouteMap(map) {+  return addParentPaths(normalize(map))+}++export function useRouteMap(map) {+  if (!map[_]) throw new Error(`Use asRouteMap`)+  const context = React.useMemo(+    () => {+      return {+        root: map,+        path: map,+      }+    },+    [map]+  )+  return {+    context,+    handlers: { extractPath, determineNestedContext }+  }+}++export function pick(pathname, [routeMap, defaultHandler], ...overrides) {+  if (!routeMap[_]) throw new Error('Please wrap normalize your routeMap using the `asRouteMap` function')+  const routes = routeToRoutes(routeMap, defaultHandler, overrides)+  return originalPick(pathname, ...Object.entries(routes))++  function routeToRoutes(route, defaultHandler, overrides, base = '') {+    const { [_]: internal, path, meta, data, ...children } = route+    if (path) {+      const [override, handler] = overrides.find(([x]) => x === route) || []+      const absolutePath = makePathAbsolute(path, base)+      return {+        [absolutePath]: params => callOrReturn(override ? handler : defaultHandler, { ...params, route }),+        ...routeChildrenToRoutes(children, absolutePath),+      }+    }  else return routeChildrenToRoutes(children, base)++    function routeChildrenToRoutes(children, base) {+      return Object.entries(children).reduce(+        (result, [k, v]) => ({ ...result, ...routeToRoutes(v, defaultHandler, overrides, base) }),+        {}+      )+    }+  }+}++function normalize({ path, meta, data, ...children }) {+  return route({ [_]: {}, path, meta, data, ...normalizeChildren(children) })++  function normalizeChildren(children) {+    return Object.entries(children).reduce(+      (result, [k, v]) => {+        const route = normalize(typeof v === 'string' ? { path: v } : v)+        return { ...result, [k]: route }+      },+      {}+    )+  }+}++// TODO: yeah: clean this up+function route(info) {+  const { [_]: { parentPaths = [] }, path } = info+  return Object.assign(route, info)++  function route(params) {+    return [...parentPaths, path].reduce(+      (base = '', path) => {+        return (+          base && typeof base === 'object'+            ? Object.entries(base).reduce(+            (result, [k, base]) => {+              const pathValue = interpolate(path[k] || path, params)+              return {+                ...result,+                [k]: base ? `${base}/${pathValue}` : pathValue+              }+            },+            {}+          )+          : (+            path && typeof path === 'object'+              ? Object.entries(path).reduce(+                (result, [k, path]) => ({+                  ...result,+                  [k]: base ? `${base}/${interpolate(path, params)}` : interpolate(path, params)+                }),+                {}+              )+              : base ? `${base}/${interpolate(path, params)}` : interpolate(path, params)+          )+        )+      },+      ''+    )+  }+}++function makePathAbsolute(path, base) {+  return (+    base && path ? `${base}/${pathAsString(path)}` :+    base ? base :+    path ? pathAsString(path) :+    path+  )+}++function pathAsString(path) {+  return (+    typeof path === 'string' ? path :+    path ? `(?:${Object.values(path).join('|')})` :+    path+  )+}++function addParentPaths({ [_]: internal, path, meta, data, ...children }, parentPaths = []) {+  return route({+    [_]: { parentPaths }, path, meta, data,+    ...addParentPathsToChildren(children, parentPaths.concat(path || []))+  })+}++function addParentPathsToChildren(children, parentPaths = []) {+  return Object.entries(children).reduce(+    (result, [k, v]) => ({ ...result, [k]: addParentPaths(v, parentPaths)}),+    {}+  )++}++function extractPath(route) {+  if (!route.hasOwnProperty(_)) throw new Error(`It seems the route '${JSON.stringify(route)}' is not from the route map`)+  const { [_]: { parentPaths }, path, meta, data, ...children } = route+  const abs = [...parentPaths, path].reduce(+    (base, path) => makePathAbsolute(path, base),+    ''+  )+  return `${abs}${Object.keys(children).length ? '/*' : ''}`

While tricky, I think it should result in something like this for paths with children:

/*(child1|child1/subchild1|child1/subchild2|child2/special)

This would allow us to detect non-existing urls at any level of the tree. And would prevent something like /x/:y/* to match non existing routes after the *.

Not sure if it is worth the added complexity though. So I think you should first finish with the current feature set.

EECOLOR

comment created time in a month

Pull request review commentkaliberjs/routing

Route map

+import '/reset.css'+import '/index.css'+import stylesheet from '@kaliber/build/lib/stylesheet'+import javascript from '@kaliber/build/lib/javascript'+import polyfill from '@kaliber/build/lib/polyfill'+import App from './App?universal'+import { pick } from '@kaliber/routing/routeMap'+import { routeMap } from './routeMap'++// TODO, should we add another example directory for advanced and only show the base path concept here?

yes

EECOLOR

comment created time in a month

PR opened kaliberjs/routing

Reviewers
Route map

I'm exploring the concept of a route map. It might need some better explanation, but for now you can check the files in the example directory.

I have not correctly implemented the concept of a baseDir, basePath or publicPath, so ignore the hacks to get it working. The implementation is also very messy, so please don't look at it, haha.

Interesting showcases:

  • The pick function in index.html.js > Index.routes.match
  • Reverse routing in the links
  • Route matching in the different components
  • A way to tackle multiple paths per route (here indexed by language)
+564 -55

0 comment

10 changed files

pr created time in a month

push eventkaliberjs/routing

EECOLOR

commit sha a5caa0c375ecef4a2658a2cabb036241e49d4e14

more sketching, making the language switch work

view details

push time in a month

push eventkaliberjs/routing

EECOLOR

commit sha 1dc974ff056794955d57eaf23f5b578d47506107

add relative pick

view details

EECOLOR

commit sha 2c22febf22a03b7919083bb43a37bdc2e5c0f583

first sketch with reverse routing

view details

push time in a month

push eventkaliberjs/routing

EECOLOR

commit sha 04c4e7fd35f9a84ed149c7e43ad406353206d8e3

more sketching Explored exhaustive /* routes based on children. It can be done. Most likely candidate is making `extractPath` return an array of all possible child routes (separated with /*). That requires a change in matching where /*abcdefg is treated differently from /*. We probably also need to change scoring to include length for equal scores (or use length as a base of the score).

view details

push time in a month

create barnchkaliberjs/routing

branch : route-map

created branch time in a month

push eventkaliberjs/firebase-queue

EECOLOR

commit sha 7a21d8e8ae77803ee6377a4ae6cf59cbba21d6d5

chore: update test dependencies

view details

push time in a month

issue openedfirebase/firebase-js-sdk

app.database() is not a function

Describe your environment

  • Operating System version: Ubuntu 20.04 LTS
  • Node version: v10.20.1
  • Firebase SDK version: 7.14.3+
  • Firebase Product: database

Describe the problem

After creating an app the database function does not exist. This is a regression, it worked in 7.14.2.

Steps to reproduce:

const app = firebase.initializeApp({
  databaseURL: `ws://localhost:5000`,
})

const db = app.database()

Error:

TypeError: app.database is not a function

Relevant Code:

You can use firebase-server to start a local server.

Problem can be seen by running yarn test on a checkout of https://github.com/kaliberjs/firebase-queue

created time in a month

Pull request review commentkaliberjs/routing

initial sketch

+/**+  @typedef {(to: number | string, x?: { state: object, replace?: boolean }) => void} Navigate+  @typedef {{+    location: { pathname: string, search: string, hash: string, state?: object },+    navigate: Navigate+  }} Location+  @typedef {{ basePath: string, baseParams: object, navigate: Navigate }} Base+*/+/**+  @template {unknown} T+  @typedef {Parameters<(routePath: string, createChildren: ((params: object) => T) | T) => void>} Route<T>+*/++import { createHistory } from './history'+import { pick, callOrReturn } from './matching'++/** @type {React.Context<Location | undefined>} */+const locationContext = React.createContext(undefined)+/** @type {React.Context<Base | undefined>} */+const baseContext = React.createContext(undefined)++const inBrowser = typeof window !== 'undefined'++// TODO: eslint plugin for key warning of pairs+/** @returns {{+  routes<T>(...routes: Array<Route<T>>): JSX.Element,+  route<T>(...route: Route<T>): JSX.Element+}}+*/+export function useRouting({ initialLocation = undefined } = {}) {+  return {+    routes,+    route(...route) { return routes(route) },+  }

Can we add something that allows us to match routes to non-react stuff?

const { match } = useRouting()
const x = match(['a', 1], ['b', 2])

Could be a good idea to move this to another hook

EECOLOR

comment created time in a month

Pull request review commentkaliberjs/routing

initial sketch

+/**+  @typedef {(to: number | string, x?: { state: object, replace?: boolean }) => void} Navigate+  @typedef {{+    location: { pathname: string, search: string, hash: string, state?: object },+    navigate: Navigate+  }} Location+  @typedef {{ basePath: string, baseParams: object, navigate: Navigate }} Base+*/+/**+  @template {unknown} T+  @typedef {Parameters<(routePath: string, createChildren: ((params: object) => T) | T) => void>} Route<T>+*/++import { createHistory } from './history'+import { pick, callOrReturn } from './matching'++/** @type {React.Context<Location | undefined>} */+const locationContext = React.createContext(undefined)+/** @type {React.Context<Base | undefined>} */+const baseContext = React.createContext(undefined)++const inBrowser = typeof window !== 'undefined'++// TODO: eslint plugin for key warning of pairs+/** @returns {{+  routes<T>(...routes: Array<Route<T>>): JSX.Element,+  route<T>(...route: Route<T>): JSX.Element+}}+*/+export function useRouting({ initialLocation = undefined } = {}) {+  return {+    routes,+    route(...route) { return routes(route) },+  }++  function routes(...routes) { return <Routing {...{ routes, initialLocation }} /> }+}++export { pick }++export function useLocation() {+  const context = React.useContext(locationContext)+  if (!context) throw new Error('Please use a `LocationProvider` to supply a location')+  return context.location+}++export function useNavigate() {+  const context = React.useContext(baseContext)+  if (!context) throw new Error('Please use a `LocationProvider` to supply a navigate function')+  return context.navigate+}++function LocationProvider({ initialLocation = undefined, children: originalChildren }) {+  const children = <RootBaseContextProvider children={originalChildren} />++  return inBrowser+    ? <BrowserLocationProvider {...{ children }} />+    : <ServerLocationProvider {...{ children, initialLocation }} />+}++function BrowserLocationProvider({ children }) {+  const history = React.useMemo(createHistory, [])+  const [location, setLocation] = React.useState(() => history.location)++  React.useEffect(+    () => history.listen(({ location }) => setLocation(location)),+    [history]+  )++  const value = React.useMemo(+    () => ({ location, navigate: history.navigate }),+    [location, history]+  )++  return <locationContext.Provider {...{ value, children }} />+}++function ServerLocationProvider({ initialLocation, children }) {+  const value = React.useMemo(+    () => ({+      location: initialLocation,+      navigate: () => { throw new Error('You can not navigate on the server') }+    }),+    [initialLocation]+  )++  return <locationContext.Provider {...{ value, children }} />+}++function RootBaseContextProvider({ children }) {+  const { navigate } = React.useContext(locationContext)+  const value = React.useMemo(+    () => ({+      basePath: '',+      baseParams: {},+      navigate: (to, x) => navigate(resolve('', to), x),+    }),+    [navigate],+  )+  return <baseContext.Provider {...{ value, children }} />+}++function NestedBaseContexProvider({ routePath, params, createChildren }) {+  const { basePath, baseParams, navigate } = React.useContext(baseContext)+  const { pathname } = useLocation()++  const value = React.useMemo(+    () => {+      const newBasePath = pathname === '/' ? '' : pathname.replace(new RegExp(`${params['*']}$`), '')+      return {+        // basePath: `${basePath}${routePath}`, // we might want to keep this route path+        basePath: newBasePath,+        baseParams: { ...baseParams, ...params },+        navigate: (to, x) => navigate(resolve(newBasePath, to), x)+      }+    },+    [basePath, routePath, navigate, params, baseParams]+  )+  const children = callOrReturn(createChildren, value.baseParams)

It would be nicer if this call was in the parent

EECOLOR

comment created time in a month

push eventkaliberjs/routing

EECOLOR

commit sha 55c390ceb3899b0cf2926e1c1ea19b9bdd63ba6d

improve Link

view details

EECOLOR

commit sha 4916d0d9a58d31d8bd9b2c58782aade7fb21e277

improve code hinting during development

view details

EECOLOR

commit sha 6b753f195050f31bd9e3c2fb78d9dfc6ebe44fc2

change `pick` to `routes` and improve typing

view details

EECOLOR

commit sha 7f9a10da3a8abce090c296b149aebecfafecf6fa

add `route` to `useRouting`

view details

push time in a month

pull request commentkaliberjs/routing

initial sketch

Hmm, I think we can skip the useRouting for all non top-level uses completely. Although I don't think it's a good idea because it's harder to remember when to use what:

import { useRouting } from '@kaliber/routing'

function Root({ initialLocation }) {
  const { routes } = useRouting({ initialLocation })
  return routes(
    ['a', <Child />],
    ['b', <Child />],
  )
}


import { routes } from '@kaliber/routing'

function Child() {
  return routes(
    ['a', <a />],
    ['b', <b />],
  )
}

vs

import { useRouting } from '@kaliber/routing'

function Root({ initialLocation }) {
  const { routes } = useRouting({ initialLocation })
  return routes(
    ['a', <Child />],
    ['b', <Child />],
  )
}


import { useRouting } from '@kaliber/routing'

function Child() {
  const { routes } = useRouting()

  return routes(
    ['a', <a />],
    ['b', <b />],
  )
}
EECOLOR

comment created time in a month

pull request commentkaliberjs/routing

initial sketch

@peeke About the different types of matches. With the current setup you could do this:

<div>
  {pick(['/:param/*', params => <Component {...params} />])}
  {pick(['/:param/:slug', params => <Drawer {...params}  />])}
  {pick(['/:param/:slug', params => <Overlay {...params}  />])}
</div>

@JoostKiens commented on the name of the method. I don't have a favorite yet. On top of that, we could make it a single overloaded method or two methods to support this use case better.

  <div>
    {matchRoutes(
      ['/a', <a />], 
      ['/b', <b />],
    )}
    {matchRoute('/c', <c />)}
    {matchRoute('/c', <c />)}
  </div>

or

  <div>
    {match(
      ['/a', <a />], 
      ['/b', <b />],
    )}
    {match('/c', <c />)}
    {match('/c', <c />)}
  </div>

or

  <div>
    {routes(
      ['/a', <a />], 
      ['/b', <b />],
    )}
    {route('/c', <c />)}
    {route('/c', <c />)}
  </div>

Looking at this it seems the last one is my favorite.

Ohw, and your original version could be solved like this (using the route syntax) if you want to use nesting (at least I think):

<div>
  {route(':param/*', params =>
    <>
      <Component {...params} />
      {route(':slug', params =>
        <>
          <Drawer {...params} />
          <Overlay {...params} />
        </>
      )}
    </>
  )}
</div>
EECOLOR

comment created time in a month

Pull request review commentkaliberjs/routing

initial sketch

+/**+  @typedef {(to: number | string, x?: { state: object, replace?: boolean }) => void} Navigate+  @typedef {{+    location: { pathname: string, search: string, hash: string },+    navigate: Navigate+  }} Location+  @typedef {{ basePath: string, baseParams: object, navigate: Navigate }} Base+*/++import { createHistory } from './history'+import { pick, callOrReturn } from './matching'++/** @type {React.Context<Location | undefined>} */+const locationContext = React.createContext(undefined)+/** @type {React.Context<Base | undefined>} */+const baseContext = React.createContext(undefined)++const inBrowser = typeof window !== 'undefined'++// TODO: eslint plugin for key warning of pairs+export function useRouting({ initialLocation = undefined } = {}) {+  return {+    pick(...routes) { return <Routing {...{ routes, initialLocation }} /> }+  }+}++export { pick }++export function useLocation() {+  const context = React.useContext(locationContext)+  if (!context) throw new Error('Please use a `LocationProvider` to supply a location')+  return context.location+}++export function useNavigate() {+  const context = React.useContext(baseContext)+  if (!context) throw new Error('Please use a `LocationProvider` to supply a navigate function')+  return context.navigate+}++function LocationProvider({ initialLocation = undefined, children: originalChildren }) {+  const children = <RootBaseContextProvider children={originalChildren} />++  return inBrowser+    ? <BrowserLocationProvider {...{ children }} />+    : <ServerLocationProvider {...{ children, initialLocation }} />+}++function BrowserLocationProvider({ children }) {+  const history = React.useMemo(createHistory, [])+  const [location, setLocation] = React.useState(() => history.location)++  React.useEffect(+    () => history.listen(({ location }) => setLocation(location)),+    [history]+  )++  const value = React.useMemo(+    () => ({ location, navigate: history.navigate }),+    [location, history]+  )++  return <locationContext.Provider {...{ value, children }} />+}++function ServerLocationProvider({ initialLocation, children }) {+  const value = React.useMemo(+    () => ({+      location: initialLocation,+      navigate: () => { throw new Error('You can not navigate on the server') }+    }),+    [initialLocation]+  )++  return <locationContext.Provider {...{ value, children }} />+}++function RootBaseContextProvider({ children }) {+  const { navigate } = React.useContext(locationContext)+  const value = React.useMemo(+    () => ({+      basePath: '',+      baseParams: {},+      navigate: (to, x) => navigate(resolve('', to), x),+    }),+    [navigate],+  )+  return <baseContext.Provider {...{ value, children }} />+}++function NestedBaseContexProvider({ routePath, params, createChildren }) {+  const { basePath, baseParams, navigate } = React.useContext(baseContext)+  const { pathname } = useLocation()++  const value = React.useMemo(+    () => {+      const newBasePath = pathname === '/' ? '' : pathname.replace(new RegExp(`${params['*']}$`), '')+      return {+        // basePath: `${basePath}${routePath}`, // we might want to keep this route path+        basePath: newBasePath,+        baseParams: { ...baseParams, ...params },+        navigate: (to, x) => navigate(resolve(newBasePath, to), x)+      }+    },+    [basePath, routePath, navigate, params, baseParams]+  )+  const children = callOrReturn(createChildren, value.baseParams)++  return <baseContext.Provider {...{ value, children }} />+}++function Routing({ routes, initialLocation }) {+  const context = React.useContext(locationContext)+  if (!context && !inBrowser && !initialLocation)+    throw new Error(`Your need to supply an initial location on server side rendering`)++  const children = <RoutingImpl {...{ routes }} />+  return context ? children : <LocationProvider {...{ children, initialLocation }} />+}++function RoutingImpl({ routes }) {+  const { pathname } = useLocation()+  const { basePath } = React.useContext(baseContext)++  const mappedRoutes = routes.map(([routePath, createChildren]) =>+    [routePath, params => <NestedBaseContexProvider {...{ routePath, params, createChildren }} />]+  )++  const relativePathname = pathname.replace(basePath, '')+  return pick(relativePathname, ...mappedRoutes)+}++export function Link({ to, children: originalChildren }) {+  const context = React.useContext(baseContext)+  const children = <LinkImpl {...{ to }} children={originalChildren} />+  return context ? children : <LocationProvider {...{ children }} />+}++// TODO: check Reach router for a better implementation+function LinkImpl({ to, children }) {+  const { basePath, navigate } = React.useContext(baseContext)+  const href = resolve(basePath, to)+  return <a {...{ href, children, onClick }} />

Yeah, this one needs some work. I can imagine we do not provide a component so we can use our own (project specific) links. I'll check some projects to see how we normally handle links.

EECOLOR

comment created time in a month

issue commentkaliberjs/forms

Hook into changed form state

Although it's not part of the 'official' API I think you can do fieldOrForm.value.subscribe(...).

If that works we can document it and with that make it official.

peeke

comment created time in a month

Pull request review commentkaliberjs/routing

initial sketch

+// TODO: we need some tests for this one+export function pick(pathname, ...routes) {+  for (const [path, onMatch] of routes) {+    if (typeof path !== 'string') throw new Error(`Unexpected non-string value '${path}' in routes`)+    const matched = match(pathname, path)+    if (matched) return callOrReturn(onMatch, matched)+  }+  return null+}++export function callOrReturn(x, ...args) {+  return typeof x === 'function' ? x(...args) : x+}++match.cache = {}

Great question. Over the years it has gradually changed and apparently I ended up doing this. Originally it was like this:

function test() {
  const cache = test.cache || (test.cache = {})
  if (test.cache && test.cache[key]) ...

  return test.cache[key] = ... 
}

Making the outside world oblivious to the fact that caching was used. This also makes it very portable.

The downside of this original approach is that typescript does not know about the cache property. The easiest route to keep the red squiggles at bay was to move test.cache = {} to it's separate line. The upside of this move is that it's instantly clear that this function has a form of caching, which has the following benefits:

  • Can (almost) safely be called very often
  • Returns stable values (handy when used in conjunction with hooks)

So all in all I think it is better to have match.cache = {} than const matchCache = {}

We could however think about introducing a utility (memoization), this however requires us to do this:

export { 
  match: momoize(match)
}

And in some case (haven't checked this case) things become more problematic and less performant.

EECOLOR

comment created time in a month

Pull request review commentkaliberjs/routing

initial sketch

+import { useRouting, Link } from '@kaliber/routing'++export default function App({ initialLocation }) {+  const { pick } = useRouting({ initialLocation })+  return (+    <>+      <Navigation />+      {pick(

Or routes?

EECOLOR

comment created time in a month

Pull request review commentkaliberjs/routing

initial sketch

+import { useRouting, Link } from '@kaliber/routing'++export default function App({ initialLocation }) {+  const { pick } = useRouting({ initialLocation })+  return (+    <>+      <Navigation />+      {pick(

Would match be better?

EECOLOR

comment created time in a month

push eventkaliberjs/routing

EECOLOR

commit sha 58cb7911bfb9de8633753a4a8f51b73f99cdef57

code cleanup

view details

push time in a month

fork EECOLOR/keen-slider

The HTML touch slider carousel with the most native feeling

https://keen-slider.io/

fork in a month

push eventkaliberjs/routing

EECOLOR

commit sha 6d7f39aeabc51bc5163ae77d1d353ca1b30ce736

remove rogue files

view details

push time in a month

PR opened kaliberjs/routing

initial sketch

This is a first sketch version. I mainly seek feedback for the example (the implementation is very rough and will change quite a bit).

Things I will would like to add for the first published version:

  • a way to remove duplication of the double route paths (can already be achieved by creating consts in a separate file)
  • (context aware) reverse routing
  • (context aware) route tree, a route definition that allows you to define metadata and data fetching
+9950 -0

0 comment

28 changed files

pr created time in a month

create barnchkaliberjs/routing

branch : first-version

created branch time in a month

create barnchkaliberjs/routing

branch : master

created branch time in a month

created repositorykaliberjs/routing

created time in a month

created tagkaliberjs/build

tagv0.0.110

Zero configuration, modern, opinionated build tools

created time in 2 months

push eventkaliberjs/build

EECOLOR

commit sha 463b8fc75b7b646e500143a14cf67ce4612721da

v0.0.110

view details

push time in 2 months

delete branch kaliberjs/build

delete branch : dependency-update

delete time in 2 months

push eventkaliberjs/build

EECOLOR

commit sha e41663ecc465cb80a65e67bcd35e9b8f83efc20a

upgrade non-major dependencies

view details

EECOLOR

commit sha ba7e990f4a916e026a7d01eef7bc95a3c04a5930

upgrade eslint

view details

EECOLOR

commit sha 8ade2ea0f36bdbb00339c0407523d8797b5cf013

upgrade mocha

view details

EECOLOR

commit sha 130ab4ca3f0070624e1656f5719dd2dfbdde40e8

revert accidentally commited change

view details

EECOLOR

commit sha 631f9764dadf34264640780c1179423364536576

updated build related dependencies

view details

EECOLOR

commit sha 673d3f5e8c96457535317766cf18f7bcd31359f7

upgrade stylelint-use-nesting

view details

EECOLOR

commit sha f6035a199ec41317b9f6a0910591c8ad2b938dfa

upgraded react sticky node

view details

EECOLOR

commit sha 44a0aa5ec6166ae538aff0d6012b75b258cf1d35

upgraded history

view details

EECOLOR

commit sha da3301796186f2e9d703f07eb8a902316279e77b

Merge pull request #198 from kaliberjs/dependency-update Dependency updates

view details

push time in 2 months

PR merged kaliberjs/build

Dependency updates
+2312 -2496

0 comment

5 changed files

EECOLOR

pr closed time in 2 months

PR opened kaliberjs/build

Dependency updates
+2312 -2496

0 comment

5 changed files

pr created time in 2 months

create barnchkaliberjs/build

branch : dependency-update

created branch time in 2 months

Pull request review commentcss-modules/css-modules-loader-core

update postcss to version 7

   },   "dependencies": {     "icss-replace-symbols": "1.1.0",-    "postcss": "6.0.1",-    "postcss-modules-extract-imports": "1.1.0",-    "postcss-modules-local-by-default": "1.2.0",-    "postcss-modules-scope": "1.1.0",-    "postcss-modules-values": "1.3.0"+    "postcss": "7.0.5",

While you are right in most cases, if a user has 7.0.3 for example and he adds this module, things will break.

That said, practically I think it's fine to use ^7.0.0 because 7.0.5 was released long enough ago. The chance a user has a lower than 7.0.5 is very slim.

For these types of libraries I think I would even move the dependency to the peerDependencies.

EECOLOR

comment created time in 2 months

pull request commentcss-modules/css-modules-loader-core

update postcss to version 7

That is exactly the reason why we stepped away from using this module and just used the separate underlying modules that do the actual work.

EECOLOR

comment created time in 2 months

Pull request review commentcss-modules/css-modules-loader-core

update postcss to version 7

   },   "dependencies": {     "icss-replace-symbols": "1.1.0",-    "postcss": "6.0.1",-    "postcss-modules-extract-imports": "1.1.0",-    "postcss-modules-local-by-default": "1.2.0",-    "postcss-modules-scope": "1.1.0",-    "postcss-modules-values": "1.3.0"+    "postcss": "7.0.5",

As a side note, some versions before 7.0.5 contained bugs that prevented stuff from working. It's too long ago to remember which ones. If you still want to go this route I would suggest ^7.0.5

EECOLOR

comment created time in 2 months

pull request commentcss-modules/css-modules-loader-core

update postcss to version 7

@lukeed Please read these comments:

https://github.com/css-modules/postcss-modules/issues/70#issuecomment-464376447 https://github.com/css-modules/postcss-modules/issues/70#issuecomment-465015687,

EECOLOR

comment created time in 2 months

pull request commentkaliberjs/use-is-intersecting

Also return wasIntersecting from useIsIntersecting

@JoostKiens wasIntersecting is een property toch? useWasIntersecting is een hook. Ik zie geen problemen wat betreft naamgeving

peeke

comment created time in 2 months

issue commentaframevr/aframe

Security vulnerability in 'debug' dependency

Not sure if those npm warnings are worth considering.

To me it seems they are always worth considering.

Debug is just a small logging utility library and we currently use a fork we maintain.

You could rename your fork, that would at least not trigger vulnerability reports targeted to other libraries. Also, if you don't want to fix the vulnerability you should mention that the fork should not be used for public consumption in a node.js environment.

As for the threat to applications using aframe. If a bad user somehow is able to influence the information given to the debug library, he is able to make the site unresponsive. I don't know if there is any aframe code executed in server-side rendered situation.

In any case, if you ask me I would say the risk is tolerable to this project. I would just change the name of the library to prevent the 'wrong' vulnerability reports from popping up.

larsvankleef

comment created time in 2 months

pull request commentkaliberjs/build

`sub` directory

@JoostKiens ?

EECOLOR

comment created time in 2 months

Pull request review commentkaliberjs/build

Update docs regarding arrays in config

 app.use(...[].concat(serveMiddleware)) This allows you to call the `use` function in any way you like. If you only need to supply a single argument you set the value of that argument to `serveMiddleware`. If you need multiple arguments you define `serveMiddleware` as an array corresponding to those arguments.++A note on arrays: we shallow merge the `default` configuration with the current staging's configuration, so arrays (as for example in `serveMiddleWare`) are overwritten by the one in current staging's configuration. If this is the case for you, it is best to define arrays in each staging's configuration and not in `default`.

we shallow merge the default configuration This is not right, we are doing a deep merge. Array however are merged as objects:

// default.js
{ test: [1, 2, 3] }

// phase.js
{ test: [4, 5] }

// result
{ test: [4, 5, 3] }
JoostKiens

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 create separate html pages for each location. ```jsx import Page from '/Page' -export default ({ location }) => (-  <Page>-    location.pathname === '/part1'+export function fnName ({ location }) {+  return (+    <Page>+      location.pathname === '/part1'

Hier missen nog { en } volgens mij

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 Let's say you have the following static site: ```jsx import MyComponent from '/MyComponent' -export default (-  <html>-    <head>...</head>-    <body>-      <MyComponent someProp='value' />-    </body>-  </html>-)+export function fnName() {

export default is goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 index.routes = {   } } -export default function index(({ location, data })) {+export function index(({ location, data })) {

export default was goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 to make to be able to add dynamic stuff and start using `state` in my component ```jsx import MyComponent from '/MyComponent?universal' // <-- -export default (-  <html>-    <head>...</head>-    <body>-      <MyComponent someProp='value' />-    </body>-  </html>-)+export function fnName() {

export default is goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 It consists of two parts: First step is to create a renderer (`/myRenderer.js`).  ```js-export default function myRenderer(template) {+export function myRenderer({ template }) {

export default is goed hier. Ik weet alleen niet zeker of de linter het goed oppikt

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 create separate html pages for each location. ```jsx import Page from '/Page' -export default ({ location }) => (-  <Page>-    location.pathname === '/part1'+export function fnName ({ location }) {

export default was goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 easy: simply add `?universal` to your import. import MyComponent from '/MyComponent?universal' import Page from '/Page' -export default (-  <Page>-    <MyComponent title='Hello world!' flashInterval={1000} />-  </Page>-)+export function fnName () {

index.html.js - export default

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

Update linting rules on introduction samples

 is written in using modern css.  ```jsx import stylesheet from '@kaliber/build/stylesheet'-import styles from '/main.css'--export default (-  <html>-    <head>-      {stylesheet}-    </head>-    <body>-      <h1>Hello world!</h1>-      <div className={styles.body}>How are you doing?</div>-    </body>-  </html>-)+import styles from './main.css'++export function fnName() {

export default was goed. Je zal em moeten testen in index.html.js

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 export default function index({ location, data: { app } }) { ```jsx import { BrowserRouter } from 'react-router-dom' -export default class App extends Component {-+export class App extends Component {

Misschien een goed idee om hier een functioneel component van te maken.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 index.routes = {     } catch (e) {       return { status: 500, data: { error: true } }     }-  }+  }, } -export default function index({ location, data }) {+export function index({ location, data }) {   const { error, missing, content } = data   return (-    <html>-      <head></head>-      <body>-        {error-          ? '500 - error'-          : missing-          ? '404 - not found'-          : <p>{content}</p>-        }-      </body>+    <html lang="en">+      <head />+      <body>{error ? '500 - error' : missing ? '404 - not found' : <p>{content}</p>}</body>
      <body>
        {
          error ? '500 - error' : 
          missing ? '404 - not found' : 
          <p>{content}</p>
        }
    </body>
martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 import javascript from '@kaliber/build/lib/javascript' import MyInteractiveComponent from '/MyInteractiveComponent?universal'  return (-  <html>+  <html lang="en">     <head>{javascript}</head>     <body>       <MyInteractiveComponent content='Hello world!' />-    <body>+    </body>   </html> ) ```  `src/MyInteractiveComponent.js` ```js-export default class MyInteractiveComponent extends Component {-+export class MyInteractiveComponent extends Component {

Als iets univeral kan worden geimporteerd moet het een export default hebben. En als het een export default heeft zal de naam ook op App moeten eindigen. Daarnaast lijkt het me goed om er een function component van te maken.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 index.routes = {   match: async location => {     const data = await fetchMetadataForLocation(location)     return { data }-  }+  }, } -export default function index({ data }) {+export function index({ data }) {

default was goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 import javascript from '@kaliber/build/lib/javascript' import stylesheet from '@kaliber/build/lib/stylesheet' import htmlReactRenderer from '@kaliber/build/lib/htmlReactRenderer' -export default tplRenderer(template) {+export function tplRenderer(template) {

volgens mij moeten renderers een export default hebben

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 files the have the `{name}.entry.css` pattern. Your template would look like thi `src/index.html.js` ```jsx import stylesheet from '@kaliber/build/lib/stylesheet'-import '/main.entry.css'+import './main.entry.css'  return (-  <html>+  <html lang="en">     <head>{stylesheet}</head>     <body>-      <div className='content'>+      <div className="content">

zouden single quotes moeten zijn, in javascript gebruiken we geen dubbele quotes voor zover ik weet. Zou kunnen zijn dat we hier geen linting regel voor hebben. Als dat zo is moeten we die even toevoegen.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 non-function value. An example: `src/index.html.js` ```jsx import stylesheet from '@kaliber/build/lib/stylesheet'-import styles from '/main.css'+import styles from './main.css'

Volgens de linting regels zou dit import styles from './Index.css' moeten zijn

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 An example: ```jsx import App from '/App?universal' -export default (-  <html>-    <head />-    <body><App /></body>-  </html>-)+export function fnName() {

export default was prima

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 index.routes = {     } catch (e) {       return { status: 500, data: { error: true } }     }-  }+  }, } -export default function index({ location, data }) {+export function index({ location, data }) {

default was wel goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 An example: ```jsx import App from '/App?universal' -export default (-  <html>-    <head />-    <body><App /></body>-  </html>-)+export function fnName() {+  return (+    <html lang="en">+      <head />+      <body>+        <App />+      </body>+    </html>+  )+} ```  `src/App.js` ```jsx-export default class SinglePageApplication extends Component {-+export class SinglePageApplication extends Component {

Volgens de linting moet ie dan ook App heten denk ik. Ik zou er meteen een functioneel component van maken.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 index.routes = {     if (location.pathname === '/old-path') {       return { status: 301, headers: { Location: '/new-path' } }     }-  )+  } } -export default function index() {+export function index() {

Hier moet default wel.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 const defaultOptions = { ```jsx import rollbar from '@kaliber/build/lib/rollbar' -export default (-  <html>-    <head>-      {/* include rollbar before any other javascript */}-      {rollbar({ accessToken, ...  })}--      {polyfill(['default', 'es2015', 'es2016', 'es2017', 'fetch'])}-      {javascripts}-    </head>-    <body />-  </html>-)+export function fnName() {

default was wel goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 export default function index({ location, data: { app } }) { ```jsx import { BrowserRouter } from 'react-router-dom' -export default class App extends Component {-+export class App extends Component {

Misschien dat we deze weg moeten gooien of vervangen door Reach router

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 import { StaticRouter } from 'react-router'  import App from '/App?universal' -index.routes: {+index.routes = {   match: location => {     const context = {}     const app = ReactDOMServer.renderToString(-      <StaticRouter location={location} context={context}>-        <App/>-      </StaticRouter>+      <StaticRouter {...{ location, context }}>+        <App />+      </StaticRouter>,     )     const headers = context.url ? { Location: context.url } : {}     const status = context.status     return { status, headers, data: { app } }-  }+  }, } -export default function index({ location, data: { app } }) {+export function index({ location, data: { app } }) {

Hier moet default wel.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 export default function index({ location, data: { app } }) { ```jsx import { BrowserRouter } from 'react-router-dom' -export default class App extends Component {-+export class App extends Component {

mag trouwens volgens mij ook default houden

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 import '/main.entry.js' import stylesheet from '@kaliber/build/lib/stylesheet' import javascript from '@kaliber/build/lib/javascript' -export default (-  <html>-    <head>-      {stylesheet}-      {javscript}-    </head>-    <body />-  </html>-)+export function fnName() {+  return (+    <html lang="en">+      <head>+        {stylesheet}+        {javascript}+      </head>+      <body />+    </html>+  )+}

Deze was prima

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 We first render React to mjml and then render that result to html. import { mjml2html } from 'mjml' import htmlReactRenderer from '@kaliber/build/lib/html-react-renderer' -export default function mjmlRenderer(template) {+export function mjmlRenderer({ template }) {

deze was goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 Our `polyfill()` method (see example below) expects an array of features and ali // import the polyfill import polyfill from '@kaliber/build/lib/polyfill' -export default (-  <html>-    <head>-      {/* call the polyfill with the required aliases and features */}-      {polyfill(['default', 'es2015', 'es2016', 'es2017', 'fetch'])}-      {/*-        this will output: -        <script defer src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es2015,es2016,es2017,fetch" crossorigin="anonymous" />-      */}-    </head>-    <body />-  </html>-)+export function fnName() {

dit moet geen functie zijn

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 e-mail. In most cases however you want your e-mail to contain dynamic data.  `dynamic.mjml.js` ```js-export default function dynamic(props) {+export function dynamic({ props }) {

deze was goed

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 Passing functions or children does not work. This means that the following will ```jsx import App from '/App?univeral' -export default (-  <html>-    <head></head>-    <body>-      <App>-        <h1>Title</h1>-        <p>Content</p>-      </App>-    </body>-  </html>-)+export function fnName() {+  return (+    <html lang="en">+      <head />+      <body>+        <App>+          <h1>Title</h1>+          <p>Content</p>+        </App>+      </body>+    </html>+  )+}

Het kan wel zijn dat onze linting verkeerd is misschien. In een xyz.abc.js bestand zou het namelijk wel moeten kunnen om export default te doen.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 To make it truly universal you would need to the following changes: ```jsx import App from '/App?univeral' -export default function index(location) {+export function index({ location }) {

deze moet wel export default hebben.

martijndevalk

comment created time in 2 months

Pull request review commentkaliberjs/build

update how-to samples

 Passing functions or children does not work. This means that the following will ```jsx import App from '/App?univeral' -export default (-  <html>-    <head></head>-    <body>-      <App>-        <h1>Title</h1>-        <p>Content</p>-      </App>-    </body>-  </html>-)+export function fnName() {+  return (+    <html lang="en">+      <head />+      <body>+        <App>+          <h1>Title</h1>+          <p>Content</p>+        </App>+      </body>+    </html>+  )+}

Dit was volgens mij gewoon geldig. Het moet in ieder geval geen functie worden omdat dan het gedrag veranderd.

martijndevalk

comment created time in 2 months

CommitCommentEvent

pull request commentkaliberjs/build

`sub` directory

@peeke you have convinced me. @JoostKiens what about you?

And if we choose feature, I think I would go for features because we also have pages.

EECOLOR

comment created time in 2 months

pull request commentkaliberjs/build

`sub` directory

@peeke I forwarded the Slack conversation about this in an e-mail. That should give you some background info and also provide a lot of alternative names we considered.

EECOLOR

comment created time in 2 months

Pull request review commentkaliberjs/build

`sub` directory

 const path = require('path')  const modifiers = [   function removeQueryString(source, file, config) {-    const [newSource] = source.split('?')+    const newSource = source.split('?')

Very nice! That was an accidental edit!

EECOLOR

comment created time in 2 months

pull request commentkaliberjs/build

allow custom properties in child selectors

Seems your solution is using a margin as a padding anyway, it's in the border-box of the element.

Not according to our rules. I have multiple thead and tbody elements in a single table. I want spacing after all (but the last) tbody. That space should not be part of the tbody.

If the element is a tbody, use a padding.

I might be able to get away with that in my specific use case

There's no such thing as a margin between table elements (border-spacing comes close).

Haha, yeah, I noticed. There should be though. The specs allow for multiple thead and tbody elements. And margin-bottom does work on tr.

EECOLOR

comment created time in 2 months

pull request commentkaliberjs/build

`sub` directory

Note to self: add sub to the example test application and test start / build, etc..

EECOLOR

comment created time in 2 months

PR opened kaliberjs/build

`sub` directory

This pull request follows from a discussion about directories.

The template contains a components directory. It felt a bit weird for this directory to have files other than actual React components (or their styles).

We noticed the following:

  • components is the opposite for pages
  • domain is the opposite for machinery

We wanted a directory for things that a not pages and not machinery. The problem was that leaving out a directory would hinder the organisation of files. But the components/domain part should be implicit by the fact that the file was not in machinery or pages.

This drove us to the following:

  • sub for both domain and components
  • Root slash imports first search in sub

In this pull request I have adjusted the template to reflect this.

When reviewing it is important to think about backward compatibility. Does this change break any of our existing websites?

+35 -15

0 comment

17 changed files

pr created time in 2 months

create barnchkaliberjs/build

branch : sub-directory

created branch time in 2 months

pull request commentkaliberjs/build

fix automatic imports

Also consider changing the following in the template (might need to be a separate pull request):

original

import { oneOf, node } from 'prop-types'
import styles from './CenteredContainer.css'

CenteredContainer.propTypes = {
  size: oneOf(['sm', 'md', 'lg']).isRequired,
  children: node
}

export function CenteredContainer({ children, size }) {
  return (
    <div className={styles.component}>
      <div className={styles[size]}>{children}</div>
    </div>
  )
}

improved

import styles from './CenteredContainer.css'

/**
 * @param {{
 *  children: React.ReactNode,
 *  size: 'sm' | 'md' | 'lg'
 * }} props
 */
export function CenteredContainer({ children, size }) {
  return (
    <div className={styles.component}>
      <div className={styles[size]}>{children}</div>
    </div>
  )
}

Apart from getting a warning in the editor instead of runtime, vscode now gives hints about the contents of size.

EECOLOR

comment created time in 2 months

pull request commentkaliberjs/build

fix automatic imports

This might help:

    paths": {
      "/App?universal": ["src/App"],
      "/*App?universal": ["src/*App"],
      "/*": ["src/*"]
    }
EECOLOR

comment created time in 2 months

PR opened kaliberjs/build

allow custom properties in child selectors

While we should not use custom properties in regular projects yet because of browser support it should be possible to define them without the linter giving a warning.

Before this change the error was that only layout related properties are allowed. That error does not seem fitting to a custom property.

Ohw and for internal applications we can use them.

If you are interested, this is the use case I encountered it:

.component {
  & > .taskBody:not(:last-child) {
    --margin-bottom: 20px;
  }
}

.componentTaskBody {
  &::after { /* work-around for non functioning margin-bottom on tbody */
    content: '';
    display: block;
    margin-bottom: var(--margin-bottom);
  }
}
+21 -1

0 comment

2 changed files

pr created time in 2 months

create barnchkaliberjs/build

branch : allow-custom-propery-in-child

created branch time in 2 months

pull request commentkaliberjs/build

fix automatic imports

Hmm: Cannot find module '/App?universal'

Which was to be expected...

EECOLOR

comment created time in 2 months

PR opened kaliberjs/build

fix automatic imports

It now prefers the version without ?universal which is much more common.

+2 -2

0 comment

1 changed file

pr created time in 2 months

create barnchkaliberjs/build

branch : typescript-automatic-imports

created branch time in 2 months

issue commentkaliberjs/use-element-size

Using the callback ref on animated element (React Spring) causes a cleanup ↻ install loop

I created a ticket for react-spring: https://github.com/react-spring/react-spring/issues/1037

peeke

comment created time in 2 months

more