conarrative / framework-x Goto Github PK

examples/with-router, examples/simple

read through them before release if we keep them

Right now createStore is our only ts file and the only one worth having. Ideally it would import some of its type defs from index.d.ts so we can still offer goto definition that resolves to source code instead of types. We need to package it for ts users to return type info from the create store function.

Set up in route 53

One of the mappings doesn’t handle an array as a payload. Before rewrite we had extensive tests for this that should be recovered or recreated. Also worth considering whether type definitions could be added. Package currently has no typescript.

Was a problem in the past with data-intensive apps

Stepping back from this, I'm not sure how useful it is. On my device the TOC floats and obscures a fair percentage of the page. Our pages aren't that long, so it's fairly easy to just scroll. I do think it's important that we have page relative links so people can share links to specific sections of the page, but the table of contents that allows users to jump around once they're on the site might be more trouble than it's worth

Originally posted by @alex-dixon in #25 (comment)

• 2 arg regEventFx
• side-effectless local storage

Expecting site to be visited by many mobile users

1. Separate package @framework-x/fetch-fx pulled from RealWorld example
2. import into RealWorld example

import * as R from 'ramda'


const keys = ['body', 'bodyUsed', 'ok', 'status', 'statusText', 'headers', 'redirected', 'url', 'type']
const fetchFx = R.curry(({dispatch}, [urlOrReq, successEventOrEventVector, failureEventOrEventVector]) => {
  let isVector = { success: true, failure: true }
  let successEventName = successEventOrEventVector
  let failureEventName = failureEventOrEventVector
  if (typeof successEventOrEventVector === 'string') {
    isVector.success = false
  } else {
    successEventName = successEventOrEventVector[0]
  }
  if (typeof failureEventOrEventVector === 'string') {
    isVector.failure = false
  } else {
    failureEventName = failureEventOrEventVector[0]
  }

  let awesomeness = urlOrReq
  if (typeof urlOrReq !== 'string') {
    awesomeness = new Request(urlOrReq.url, R.dissoc('url', urlOrReq))
  }
  (async () => {
    const res = await fetch(awesomeness)
      .catch(e => dispatch(failureEventName,
        isVector.failure
        ? { res: e, args: failureEventOrEventVector[1] }
        : e))
    const data = R.pick(keys, res)
    const json = await res.json().catch(e => console.error('error .json()ing', e))
    if (res.ok) {
      dispatch(successEventName, isVector.success ? {
        res: R.assoc('json', json, data),
        args: successEventOrEventVector[1]
      } : R.assoc('json', json, data))
    } else {
      dispatch(failureEventName,
        isVector.failure
        ? { res: R.assoc('json', json, data), args: failureEventOrEventVector[1] }
        : R.assoc('json', json, data),)
    }
  })()
})

Needs access to dispatch via context (fx api with context 1st arg) or argument to a create fn.

const createFx = ({dispatch}) => fetchFx({dispatch})

// application
regFx('fetch', fetchFx.createFx({dispatch}))

This can be used to create success and failure events for API requests programmatically

@austinlxx Looks like you figured out how to add the others...delegating to you! 😅

I'm about to push a the CSS rule, global and !important for any code. It works on my system because I have the font locally I think, so just need to make sure we get it into the gatsby build like the other fonts.

https://github.com/tonsky/FiraCode

@mikegai Let me know the best place to get this from

Basically we need to be able to feed the height of the children to the SVG dynamically. The width should be fine fixed, though it should be able to change values during responsive breakpoints.

So the usage I expect is:

<DimensionalBox maxHeight={400} width={200}>
        {content goes here, and the dimensional box should size it's height appropriately}
</DimensionalBox>

Currently:

How it's supposed to look:

Main page

Currently using a token to access the github api since the repo is private.

We can remove this once repo is public, then requests will be unauthenticated and per IP.

I think I see these all the time but can't remember the site I liked the best. We need a filetree view, editor, and live browser preview.

Suggest forking definitelytyped and creating @types/framework-x per instructions here:
https://github.com/DefinitelyTyped/DefinitelyTyped#create-a-new-package

We can publish our own type definitions, but this forces the IDEs of users of the library to resolve our definitions to the type definitions. This way there's at least the option to install types optionally and if they're not installed goto will resolve directly to source code.

I'll push a branch with the type defs but in case not here's what we have:

declare type Db = object

declare function getState(): Db

// declare interface FrameworkX {
//   getState(): Db
// }

declare module "framework-x" {
  export type EventName = string
  export type EventData = any
  export type Event = [EventName, EventData?]
  export type DbFn = (db: Db) => Db
  export type FxName = "db" | "dispatch" | string
  export type FxArg = any
  export type Effects = { db: DbFn | Db } & { [k in FxName]: FxArg }
    | [FxName, FxArg][]


  export function dispatch(...event: Event): void;
  export function dispatch(eventType: EventName, ...args: [any]): void;

  export type Coeffects = { db: Db } & { [k: string]: any }

  export type Handler = (cofx: Coeffects, eventType: EventName, args: EventData) => Effects | void

  export function regEventFx(eventType: EventName, handler: Handler): void;

  export interface Effect {
    (x: any): any
  }

  export function regFx(name: FxName, fn: Effect): void

  export function getState(): Db

  type StateListener = (db: Db) => void

  export function subscribeToState(fn: StateListener): void

  type EventListener = (type: string, payload: any, effects: any) => any

  export interface Store {
    getState(): Db

    dispatch(...event: Event): void;

    dispatch(eventType: EventName, ...args: [any]): void;

    regEventFx(eventType: EventName, handler: Handler): void;

    regFx(name: FxName, fn: Effect): void

    subscribeToState(fn: StateListener): void
  }

  export function createStore(initialState?: object): Store
}

I think we'd be better off linking to our site in some way. That way we don't have to worry about the form functionality. We want people to find us and see who's behind it but this is a little too in your face for me :/

This should be for developers but also general audience. numbers 1-5 that show on home page and /features

@framework-x/error-tools is the best name I have right now. Suggestions definitely welcome!

Should be published as 1.0.0 to track framework-x@1

Should try to switch our examples to use the published version

this should be configurable through the gatsby plugin that manages this functionality, if not let me know

At least one is required for submission

Hi Alex and Team!,

It's been a long time. I hope you all are doing well and staying safe!

I have an issue with conflicting versions of ramda when specifying ramda and framework-x as regular dependencies in my project. I'm using npm v7.0.0-beta.11 in a monorepo and it fails with the following error log:

npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/ramda
npm ERR!   ramda@"^0.27.1" from the root project
npm ERR!
npm ERR! Could not add conflicting dependency: [email protected]
npm ERR! node_modules/ramda
npm ERR!   peer ramda@"^0.26.1" from [email protected]
npm ERR!   node_modules/framework-x
npm ERR!     framework-x@"^0.1.46" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --legacy-peer-deps or --force
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

Since I'm not working with any breaking change introduced in ramda>=0.27, there are two quick solutions for me: downgrade ramda to 0.26.1 or use the --legacy-peer-deps flag (default behavior on npm<7). However, I see that it might be convenient to move the ramda dependency on framework-x to the dependencies group, as any project that depends on framework-x could rely on a different version of ramda or even depend on a different functional library.

As you know, framework-x is a core dependency of the CAVE framework, so it was great when I saw you open sourced this project. 😀

I'm super excited for version 1!!! 🚀

Luis

There might be gatsby or netlify-specific instructions for this

To reproduce go to /api and click on one of the links on the left. First click page doesn't scroll but nav bar changes. subsequent clicks page scrolls and navbar changes

update: noticing the same on /learn so this is probably a general problem with the links

Forgot we can't use the server for this....

Can copy relevant code to the client minus etag cache procedure and request on componentwillmount, store values with setState. Individual IPs will be rate limited by Github to 50 req/hour or so I think. If we only show this on the home page then that's 50 trips to the homepage

Github provides client embeddable "star" buttons with counts but that doesn't fit the current design. No idea the rate limits on those.

I'm nervous about changing this only since we've had such good performance with the current setup. As we've seen with framework-x-redux we can write component as a 1-liner with react-redux. I don't think that allows a component name though.

Should close drop down

The Table of Contents does not retain nested ordering.

How it's supposed to look:

Currently:

First argument to component must be a string naming the component.

May be related to the connect wrapper (seems to require a static name for the component).

examples/todomvc

Design for normal todomvc stuff:

• todo list
• todo input
• todo filters (show all, show done, show not done)
• todo actions (clear all, clear all done)

Design for extra stuff

• notifications ("Todo added", whatever others we want e.g. "All todos cleared", "Todo marked done" "unmarked todo done" )

Throws errors on mobile/non-browser environments

Still don’t know what to call this.

• name it
• publish
• use in examples
• ux/ design signoff @austinlxx
• screenshot for intro post
• video for site/ other things

• 2 arg regEventFx
• use fx for notifications per example in intro.md

Need to figure out how to enable JSX code/syntax highlighting... I added className="language-jsx" to the <pre> component, but still does not highlight it fully.

Currently:

Correct way:

Looks like process is to open an issue and or a PR.

Need to decide whether we want to do this before announcement because it might entail making the repo public

I think we can deploy a folder now, no need for separate site branch

https://www.netlify.com/blog/2019/10/09/launching-monorepo-support-for-netlify-sites/?utm_campaign=Netlify+Newsletter+-+October+2019&utm_content=Netlify+Newsletter+-+October+2019&utm_medium=email_action&utm_source=customer.io

https://gitlab.com/conarrative/framework-x-redux

I think we should do the best we can to incorporate this into the release.

It's about 100LOC, there's some documentation in JS doc comments:
https://gitlab.com/conarrative/framework-x-redux/blob/master/src/index.js

Decisions to make:

1. Is it a separate library?
2. Are we OK with less than perfect feature parity relative to the core?
3. Are we OK with augmenting it as we add new features to the core? If not we'd need to see if we can use the core directly (haven't found a straightforward way of doing that)

@austinlxx Per our discussion we want readability first, style points second. Preferably we will have both, but if we have to choose one users should be able to read the code from space