Coder Social home page Coder Social logo

redwoodjs / redwood Goto Github PK

View Code? Open in Web Editor NEW
16.9K 97.0 974.0 413.9 MB

The App Framework for Startups

Home Page: https://redwoodjs.com

License: MIT License

JavaScript 38.53% TypeScript 60.69% CSS 0.38% HTML 0.13% XS 0.03% Prolog 0.03% MDX 0.03% Dockerfile 0.08% Shell 0.10%
jamstack graphql react apollo prisma hacktoberfest

redwood's People

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

redwood's Issues

Disconnect after a photon request

Prisma recommends explicitly disconnecting after a photon request is made.

We want to simplify DB setup for the tutorial and that means avoiding having to include a connection proxy in front of the DB (many services don't have them yet). If we disconnect after each request then we shouldn't 😬 have any problems overflowing our connection limit.

Automatically collect props passed to Cell into `variables` object for QUERY

Given the following call to a Cell:

<PostCell id={id} />

And a QUERY inside that cell:

export const QUERY = gql`
  query FIND_POST_BY_ID($id: ID!) {
    post: findPostById(id: $id) {
      id
      title
      body
      postedAt
    }
  }
`

The id prop should automatically be transformed into { variables: { id } }. Currently we need to define a beforeQuery and do this manually:

export const beforeQuery = ({ id }) => {
  return { variables: { id } }
}

Add ability to coerce route variables

Add the ability to specify types or coercion methods to use on route variables before making them available to pages via props or useParams.

Proposed syntax was something like:

<Route path="/posts/{id:Int}" page={PostPage} name="post" />

Upgrade Prisma to preview20

  • upgrade to latest version of prisma.
  • fix imports in create-redwood-app.
  • fix imports in example-blog/ example-todo.
  • use --watch in redwood dev
  • change dev commands in web/api to use redwood dev --api / redwood dev --web
  • remove references to db:up and db:save in tutorial and documents.

Generators: rollback changes if an error occurs

Right now if an error occurs while the generators are running anything that was already done (create files, append routes) will be left in place.

We should keep track of all changes that are made and roll them back if an error occurs during a generator.

Generators: add ability to destroy generated files

In Rails there is a destroy command that acts as the evil twin of generate:

rails generate scaffold Post
rails destroy scaffold Post

Let's do the same thing in Redwood. The generators themselves just return a list of files/routes so we should be able to use those lists in a destroy process to remove the files created and match and remove the routes.

Can't install packages with yarn

When trying to yarn install on a fresh clone of redwood I'm getting build errors for the sharp package on macOS 10.15.2 (Catalina).

If it just turns out there is some other dependency that's required we should note that in the README. The sharp docs mention the following for MacOS installation:

libvips and its dependencies are fetched and stored within node_modules/sharp/vendor during npm install. This involves an automated HTTPS download of approximately 8MB.

To use your own version of libvips instead of the provided binaries, make sure it is at least the version listed under config.libvips in the package.json file and that it can be located using pkg-config --modversion vips-cpp.

rob$ yarn
yarn install v1.19.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/cli > [email protected]" has unmet peer dependency "@types/react@>=16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react-dom@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/[email protected]" has unmet peer dependency "react-dom@^16.8.0".
warning "workspace-aggregator-fbf8bba0-e61a-4da9-85c7-4295a3010636 > @redwoodjs/web > @apollo/react-components > @apollo/[email protected]" has unmet peer dependency "react@^16.8.0".
[4/4] 🔨  Building fresh packages...
[-/15] ⠄ waiting...
[-/15] ⠄ waiting...
[-/15] ⠄ waiting...
[-/15] ⠄ waiting...
error /Users/rob/Sites/redwoodjs/redwood/node_modules/sharp: Command failed.
Exit code: 1
Command: (node install/libvips && node install/dll-copy && prebuild-install) || (node-gyp rebuild && node install/dll-copy)
Arguments: 
Directory: /Users/rob/Sites/redwoodjs/redwood/node_modules/sharp
Output:
info sharp Using cached /Users/rob/.npm/_libvips/libvips-8.7.4-darwin-x64.tar.gz
prebuild-install WARN install No prebuilt binaries found (target=13.2.0 runtime=node arch=x64 libc= platform=darwin)
gyp info it worked if it ends with ok
gyp info using [email protected]
gyp info using [email protected] | darwin | x64
gyp info find Python using Python version 2.7.16 found at "/System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python"
gyp info spawn /System/Library/Frameworks/Python.framework/Versions/2.7/Resources/Python.app/Contents/MacOS/Python
gyp info spawn args [
gyp info spawn args   '/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp/gyp/gyp_main.py',
gyp info spawn args   'binding.gyp',
gyp info spawn args   '-f',
gyp info spawn args   'make',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/rob/Sites/redwoodjs/redwood/node_modules/sharp/build/config.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp/addon.gypi',
gyp info spawn args   '-I',
gyp info spawn args   '/Users/rob/Library/Caches/node-gyp/13.2.0/include/node/common.gypi',
gyp info spawn args   '-Dlibrary=shared_library',
gyp info spawn args   '-Dvisibility=default',
gyp info spawn args   '-Dnode_root_dir=/Users/rob/Library/Caches/node-gyp/13.2.0',
gyp info spawn args   '-Dnode_gyp_dir=/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp',
gyp info spawn args   '-Dnode_lib_file=/Users/rob/Library/Caches/node-gyp/13.2.0/<(target_arch)/node.lib',
gyp info spawn args   '-Dmodule_root_dir=/Users/rob/Sites/redwoodjs/redwood/node_modules/sharp',
gyp info spawn args   '-Dnode_engine=v8',
gyp info spawn args   '--depth=.',
gyp info spawn args   '--no-parallel',
gyp info spawn args   '--generator-output',
gyp info spawn args   'build',
gyp info spawn args   '-Goutput_dir=.'
gyp info spawn args ]
gyp info spawn make
gyp info spawn args [ 'BUILDTYPE=Release', '-C', 'build' ]
  TOUCH Release/obj.target/libvips-cpp.stamp
  CXX(target) Release/obj.target/sharp/src/common.o
  CXX(target) Release/obj.target/sharp/src/metadata.o
  CXX(target) Release/obj.target/sharp/src/stats.o
../src/stats.cc:130:19: error: no matching member function for call to 'Set'
        channels->Set(i, channelStat);
        ~~~~~~~~~~^~~
/Users/rob/Library/Caches/node-gyp/13.2.0/include/node/v8.h:3547:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
  V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context,
                                    ^
/Users/rob/Library/Caches/node-gyp/13.2.0/include/node/v8.h:3550:37: note: candidate function not viable: requires 3 arguments, but 2 were provided
  V8_WARN_UNUSED_RESULT Maybe<bool> Set(Local<Context> context, uint32_t index,
                                    ^
1 error generated.
make: *** [Release/obj.target/sharp/src/stats.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/Users/rob/Sites/redwoodjs/redwood/node_modules/node-gyp/lib/build.js:194:23)
gyp ERR! stack     at ChildProcess.emit (events.js:210:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:270:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command "/usr/local/Cellar/node/13.2.0/bin/node" "/Users/rob/Sites/redwoodjs/redwood/node_modules/.bin/node-gyp" "rebuild"
gyp ERR! cwd /Users/rob/Sites/redwoodjs/redwood/node_modules/sharp

Error in DB setup for new app: Raw mode is not supported on the current process.stdin

Looks like this is caused because we run db:up once yarn install completes, and the first time you run db:up prisma tries to create the database which requires user input (two options are given for creating the DB). I'm guessing however the original yarn install process hooks into stdin/stdout is not setup to allow user input so this error occurs.

The command actually did complete but there was a big error thrown in the middle when trying to prompt the user what to do about creating the database:

rob$ redwood new generator-test
Created /Users/rob/Sites/redwoodjs/generator-test
Downloading https://api.github.com/repos/redwoodjs/create-redwood-app/zipball/v0.0.1-alpha.16...
Extracting...
Added 47 files in /Users/rob/Sites/redwoodjs/generator-test
Installing packages...
yarn install v1.19.2
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
warning "@redwoodjs/cli > [email protected]" has unmet peer dependency "@types/react@>=16.8.0".
warning "@redwoodjs/eslint-config > [email protected]" has unmet peer dependency "@babel/core@^7.0.0-0".
warning "@redwoodjs/eslint-config > [email protected]" has unmet peer dependency "babel-plugin-module-resolver@^3.0.0".
warning "@redwoodjs/eslint-config > @typescript-eslint/eslint-plugin > [email protected]" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] 🔨  Building fresh packages...
[-/17] ⠄ waiting...
[-/17] ⠄ waiting...
[11/17] ⠄ api
[4/17] ⠄ fsevents
error /Users/rob/Sites/redwoodjs/generator-test/node_modules/api: Command failed.
Exit code: 1
Command: yarn db:up
Arguments: 
Directory: /Users/rob/Sites/redwoodjs/generator-test/node_modules/api
Output:
yarn run v1.19.2
$ yarn prisma2 lift up && yarn prisma2 generate
$ /Users/rob/Sites/redwoodjs/generator-test/node_modules/.bin/prisma2 lift up
You are trying to apply a migration for Sqlite database /dev.db.
A database with that name doesn't exist at file:./dev.db.
Do you want to create the database?

    Yes            Create new Sqlite database /dev.db
    No             Don't create the database
Error in Create Database Dialog
Error: Raw mode is not supported on the current process.stdin, which Ink uses as
 input stream by default.
Read about how to prevent this error on https://github.com/vadimdemedes/ink/#isr
awmodesupported
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:106885:17
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:126056:9
    at commitHookEffectList (/Users/rob/Sites/redwoodjs/generator-test/node_modu
Error in Create Database Dialog
Error: Raw mode is not supported on the current process.stdin, which Ink uses as
 input stream by default.
Read about how to prevent this error on https://github.com/vadimdemedes/ink/#isr
awmodesupported
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:106885:17
    at /Users/rob/Sites/redwoodjs/generator-test/node_modules/prisma2/build/inde
x.js:126056:9
    at commitHookEffectList (/Users/rob/Sites/redwoodjs/generator-test/node_modu
les/prisma2/build/index.js:190512:26)
    at commitPassiveHookEffects (/Users/rob/Sites/redwoodjs/generator-test/node_
modules/prisma2/build/index.js:190542:11)
    at Object.invokeGuardedCallbackImpl (/Users/rob/Sites/redwoodjs/generator-te
st/node_modules/prisma2/build/index.js:190051:10)
    at invokeGuardedCallback (/Users/rob/Sites/redwoodjs/generator-test/node_mod
ules/prisma2/build/index.js:190235:31)
    at flushPassiveEffectsImpl (/Users/rob/Sites/redwoodjs/generator-test/node_m
odules/prisma2/build/index.js:193399:7)
    at unstable_runWithPriority (/Users/rob/Sites/redwoodjs/generator-test/node_
modules/prisma2/build/index.js:121924:12)
    at runWithPriority (/Users/rob/Sites/redwoodjs/generator-test/node_modules/p
risma2/build/index.js:181530:10)
    at flushPassiveEffects (/Users/rob/Sites/redwoodjs/generator-test/node_modul
es/prisma2/build/index.js:193372:10)
/usr/local/Cellar/node/13.2.0/bin/node[99406]: ../src/signal_wrap.cc:159:void node::DecreaseSignalHandlerCount(int): Assertion `(new_handler_count) >= (0)' failed.
 1: 0x100b8ff9a node::Abort() (.cold.1) [/usr/local/Cellar/node/13.2.0/bin/node]
 2: 0x1000832c4 node::FatalError(char const*, char const*) [/usr/local/Cellar/node/13.2.0/bin/node]
 3: 0x10008307c node::AppendExceptionLine(node::Environment*, v8::Local<v8::Value>, v8::Local<v8::Message>, node::ErrorHandlingMode) [/usr/local/Cellar/node/13.2.0/bin/node]
 4: 0x1000f7e52 node::HasSignalJSHandler(int) [/usr/local/Cellar/node/13.2.0/bin/node]
 5: 0x1000f85ad node::(anonymous namespace)::SignalWrap::Close(v8::Local<v8::Value>) [/usr/local/Cellar/node/13.2.0/bin/node]
 6: 0x10003eb76 node::Environment::CleanupHandles() [/usr/local/Cellar/node/13.2.0/bin/node]
 7: 0x10003ed2f node::Environment::RunCleanup() [/usr/local/Cellar/node/13.2.0/bin/node]
 8: 0x1000b4a3a node::NodeMainInstance::Run() [/usr/local/Cellar/node/13.2.0/bin/node]
 9: 0x100060f13 node::Start(int, char**) [/usr/local/Cellar/node/13.2.0/bin/node]
10: 0x7fff71e557fd start [/usr/lib/system/libdyld.dylib]
11: 0x4 
Created /Users/rob/Sites/redwoodjs/generator-test
Downloading https://api.github.com/repos/redwoodjs/create-redwood-app/zipball/v0.0.1-alpha.16...
Extracting...
Added 47 files in /Users/rob/Sites/redwoodjs/generator-test
Installing packages...
rob$ 

Redwood on JS Party?!

Howdy from JS Party! 👋

We'd love to have you on the show sometime soon. It seems like Redwood is in a great state to begin a conversation around it. We've been talking JAMStack a fair bit, but until now we haven't seen anyone step up to the plate with a full-stack, opinionated offering to tie all the concepts together.

Interested? Please email [email protected] to coordinate.

Looking forward to it! 💚

redwood generate fails in distribution due to referencing source directory

👋 Using @redwoodjs/cli@^0.0.1-alpha.16, redwood generate references the source src directory that isn't included in the built distribution, which is served from the dist directory. This results in an error where generators can't find templates. The offending lines appear to be where templateRoot is set.

export const templateRoot = path.join(
__dirname,
'..',
'..',
'src',
'commands',
'Generate',
'templates'
)

The diff below seems to fix generators in the distribution, however, there appear to be some existing failures in the tests suite, so I wasn't able to quickly verify this didn't break things in other places.

diff --git a/packages/cli/src/lib/index.js b/packages/cli/src/lib/index.js
index b6ee780..409bf3a 100644
--- a/packages/cli/src/lib/index.js
+++ b/packages/cli/src/lib/index.js
@@ -8,8 +8,6 @@ import lodash from 'lodash/string'
 export const templateRoot = path.join(
   __dirname,
   '..',
-  '..',
-  'src',
   'commands',
   'Generate',
   'templates'

And the stack trace here:

Stack trace
The above error occurred in the <Router> component:
    in Router
    in App

React will try to recreate this component tree from scratch using the error boundary you provided, App.
Warning: App: Error boundaries should implement getDerivedStateFromError(). In that method, return a state update to display an error message or fallback UI.
(node:83292) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open '/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/src/commands/Generate/templates/layout/layout.js.template'
    at Object.openSync (fs.js:440:3)
    at Object.readFileSync (fs.js:342:35)
    at readFile (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/lib/index.js:44:40)
    at generateTemplate (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/lib/index.js:37:45)
    at files (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/commands/Generate/generators/layout.js:24:46)
    at Object.files (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/commands/Generate/generators/layout.js:37:18)
    at Object.Generate [as default] (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/commands/Generate/Generate.js:106:29)
    at Router (/Users/justin/.config/yarn/global/node_modules/@redwoodjs/cli/dist/index.js:32:31)
    at renderWithHooks (/Users/justin/.config/yarn/global/node_modules/react-reconciler/cjs/react-reconciler.development.js:6036:18)
    at mountIndeterminateComponent (/Users/justin/.config/yarn/global/node_modules/react-reconciler/cjs/react-reconciler.development.js:8570:13)
(node:83292) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:83292) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

P.S. Redwood is looking great so far! I was able to quickly get a non-trivial app up and running in far less time than I would have if I were starting from a typical react bootstrap.

How to enable SSR by default?

Hi! First of all, thanks for making this happen, I've been playing with the different examples and I can't wait to see the progress on this, it's already really promising. I love the idea of having an end-to-end framework that answers the most recurrent questions.

I was wondering what will be the easiest way to enable SSR. I understand it shouldn't be that difficult as the stack is already using Apollo, any pointers?

I also would love to know how much of an impact will be on SEO having/not having SSR in the modern world, I've heard mixed opinions on the matter.

Thanks!

Checklist to get Tutorial Working

  • Scaffold generator #27 @cannikin
  • No index.js required for a Cell
  • No import required for pages in Router (in progress, @mojombo)
  • No resolvers required in SDL files (in progress, @peterp)
  • Include form helpers from example-blog into redwood proper
  • Automatically run yarn install after redwood new is finished building app structure
  • Get hot reloads working again

my last name is hammer

if you're looking for contributors, i would love to support anything that advances my last name

Favicon support

It would be nice to have proper Favicon support, let's see if we can find a library that works properly.

Hammer CLI generators

As I'm working through the tutorial I'm coming upon places we should be able to generate various Hammer aspects for the user.

The namespace for all of these generators is generate. It can also be shorted to just g. The following two commands are equivalent:

hammer generate page Foo /foo
hammer g page Foo /foo

Pages

hammer generate page [name] [route]

Generates a page component and adds a route for it.

Syntax

  • The [name] can be lowercase or CamelCase and the generator will create the correct case in its generated output. "post" and "Post" would create the same "PostPage" component.
  • If the [name] is suffixed with "page" already then it should not be added again. For example: "homePage", "home_page" or "HomePage" should all generate "HomePage".
  • The [route] is copied verbatim to the path part of the <Route> declaration.

Example Usage

hammer generate page post /

This would generate web/src/pages/PostPage/PostPage.js component containing a barebones implementation:

const PostPage = (props) => {
  return (
    <h1>Post</h1>
    <p>Find me in web/src/pages/PostPage/PostPage.js</p>
  )
}

export default PostPage

The generator would also and add the following to web/Routes.js:

<Router>
  <Route path="/" page={PostPage} name="post" />

  // exiting routes...
</Router>

Note the route is prefixed to the top of the file for simplicity. Otherwise we'll be in a cat and mouse game of trying to find where user-defined routes start and stop and have to worry about precedence. This way the newly created path is first and always "wins" if there are conflicts. It will be up to the user to fix any conflict and/or move the route to a more natural spot in the file.

Outstanding Questions

  • What to do about something like "homepage" (no snake_case or CamelCase to delimit where the word "page" is?

Layouts

hammer generate layout [name]

Generates a layout component.

Syntax

  • [name] should follow the same case rules as Pages.
  • If the [name] is already suffixed with "layout" it should not be added again. "my_layout", "MyLayout" and "myLayout" should all create a layout component named "MyLayout".

Example Usage

hammer generate layout blog

Generates web/src/layouts/BlogLayout/BlogLayout.js with a basic structure:

const BlogLayout = (props) => {
  return { props.children }
}

export default BlogLayout

Outstanding Questions

  • What to do about something like "bloglayout" (no snake_case or CamelCase to delimit where the word "layout" is?

Components

hammer generate component [name]

Creates a single component with the given [name]

Syntax

  • Names don't contain the word "component" so it shouldn't try to auto-add/remove anything from the given name

Example Usage

hammer generate component Post

Creates web/src/components/Post/Post.js with a barebones structure:

const Post = () => {
  return null
}

export default Post

Outstanding Questions

  • Maybe we could have generated components actually output something, like their own name: return "Post Component"? Would this help people who want to generate components and then immediately drop them into a page before fleshing them out? Or is it just a nuisance? I think we have to keep return null because React will raise an error if there is no return statement at all.

Cells

hammer generate cell [name]

Creates a single cell component with the given [name].

Syntax

  • Follows the same rules as page naming

Example Usage

hammer generate cell Post

Creates web/src/components/PostCell/PostCell.js with a barebones structure:

export const Query = gql`
  query {
    posts {
      id
    }
  }
`

export const Loading = () => <div>Loading...</div>

export const Empty = () => <div>Empty</div>

export const Failure = ({ message }) => <div>Error: {message}</div>

export const Success = ({ posts }) => {
  return posts.toString()
}

The cell generator assumes there was an SDL generated with the same name and so pre-fills the "findMany" GraphQL query that it would generate along with a single id column (since all DB tables should have one). The Success component just dumps the data structure to a string to verify that it worked.

Outstanding Questions

  • Maybe add a flag that lets you create the SDL for this cell at the same time? Something like hammer generate cell Post --sdl If so we could add the inverse on the SDL generator with a --cell flag
  • Should there be an --empty flag that generates no actual query or component content? Components would just render null and the page may actually error out if there is no query body at all?
  • Or maybe we could do the opposite: generate the empty one by default and set a flag if you want to include the basic query/component content, --sample or something

SDL

hammer generate sdl [name]

Introspects the database for a table named [name] and builds:

  • GraphQL type, query and mutations endpoints for retrieving one or many rows from that table, creating a new one, updating an existing one and deleting one
  • Creates the service with photon calls to CRUD behaviors (findMany, findOne, create, update, delete)

Sytanx

Example Usage

Service

hammer generate service [name] [optional list of function names]

Creates api/src/services/[name].js as a shell to start writing a service. If given an optional list of method names (separated with spaces) then those names are added as function names in the service.

Syntax

  • [name] should follow the rules for Page names
  • [optional list of method names] is a space-separated list of function names to add to the generated service

Example Usage

hammer generate service Posts all one save
const Posts = {
  all: ({}) => {
    return null
  },
  one: ({}) => {
    return null
  },
  save: ({}) => {
    return null
  }
}

Scaffold

hammer generate scaffold [name]

Generates Pages, SDL and a Service to perform basic CRUD operations on a corresponding database table. This is the mother of all generators actually invokes a couple of others (SDL and cells) behind the scenes.

Sytanx

  • [name] should be the name of a database table as created by Prisma

Example Usage

hammer generate scaffold Post

Generates:

  • api/src/graphql/posts.sdl.js
  • api/src/services/posts.js
  • web/src/components/PostsCell/PostsCell.js - displaying all posts
  • web/src/components/PostCell/PostCell.js - displaying a single post
  • web/src/components/EditPostCell/EditPostCell.js - editing a post
  • web/src/components/Post/Post.js - post display component
  • web/pages/PostsPage/PostsPage.js
  • web/pages/PostsPage/PostPage.js
  • web/pages/PostsPage/NewPostPage.js
  • web/pages/PostsPage/EditPostPage.js

As well as cooresponding routes to the pages:

<Router>
  <Route path="/posts" page={PostsPage} name="posts" />
  <Route path="/posts/:id" page={PostsPage} name="post" />
  <Route path="/posts/new" page={PostsPage} name="newPost" />
  <Route path="/posts/:id/edit" page={PostsPage} name="editPost" />
  // existing routes...
</Router>

Outstanding Questions

  • How to handle pluralization here? The database table is singular but feels more "human" to name things like the SDL and service plural. Likewise there is a PostsPage page (all posts) and a PostPage page (only a single post). This is the Rails Way™ but is it the Hammer Way™®©?

Prisma improvements

  • Add integrated seeding workflow [blocked by https://github.com/prisma/prisma/issues/9]
  • Easy switching between SQLite (for local dev) and another DB (for prod) [blocked by https://github.com/prisma/prisma/issues/265]
  • Get rid of packages/photon directory [blocked by https://github.com/prisma/prisma/issues/664]
  • Allow specification of schema.prisma path [blocked by https://github.com/prisma/prisma2/issues/225]
  • Default env vars [blocked by https://github.com/prisma/prisma/issues/222]

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.