• Stars
    star
    108
  • Rank 321,259 (Top 7 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 8 years ago
  • Updated almost 4 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

A tool to help generate code for workshop repositories

split-guide

A tool to help generate code for workshop repositories

Build Status Dependencies version downloads MIT License

All Contributors PRs Welcome Donate Code of Conduct Roadmap Examples

Watch on GitHub Star on GitHub Tweet

Sponsor

The problem

Managing workshop repositories. A great way to do a workshop repo is to have exercises and exercises-final directories. The problem is keeping these two directories in sync.

This solution

This allows you to create a template for both of these in a templates directory. Based on special text in these files, you can specify what parts of the file you want in exercises and exercises-final. This allows you to co-locate what you're going to be showing workshop attendees and what the final answer should be.

Installation

This module is distributed via npm which is bundled with node and should be installed as one of your project's devDependencies:

npm install --save-dev split-guide

Usage

Video

I recorded a video to teach people how to use split-guide and contribute to one of my workshops:

split-guide-video

CLI

This module is a CLI. The best place for it is in your npm scripts (or package-scripts.js):

{
  "scripts": {
    "generate": "split-guide generate"
  }
}

This will take all the templates you have in templates and create corresponding files in new exercises and exercises-final directories.

generate

This is currently the only available command. Below is a list of the available options (which are parsed with the amazing yargs):

--templates-dir

Defaults to ./templates. This is where split-guide will look for your template files Whatever you provide will be be resolved as relative to where you're executing the command (process.cwd) (if you're using npm scripts, that will be where the package.json file is located).

split-guide will use this to generate a glob that looks like this: ${templatesDir}/**/*. If you wish to ignore certain files, you can use the ignore option.

--exercises-dir

Defaults to ./exercises. This is where split-guide will put your exercises files Whatever you provide will be be resolved as relative to where you're executing the command (process.cwd) (if you're using npm scripts, that will be where the package.json file is located).

--exercises-final-dir

Defaults to ./exercises-final. This is where split-guide will put your exercises-final files Whatever you provide will be be resolved as relative to where you're executing the command (process.cwd) (if you're using npm scripts, that will be where the package.json file is located).

--no-clean

Defaults to false. This will tell split-guide to not remove the exercises and exercises-final directories. This is useful if you're manually putting files into those directories and don't want to have to do that every time you run split-guide. Normally you probably shouldn't be using this.

--ignore

Defaults to undefined. Can accept multiple values. This will be passed along to glob when split-guide identifies the template files. See the glob docs. Note that you may want to pass this argument in quotes as glob patterns can cause issues in the command line:

split-guide generate --ignore "**/*.ignored.js" "**/build/**/*"
--silent-success

By default, split-guide will log out how many and which files were saved. Add this to prevent that.

--silent-all

This will do the same as --silent-success but will also silence any errors. It's not recommended to use this option.

Templates

There are three directives you can use in your files. Each of these is used with a START and END.

Directives

COMMENT

Anything in this directive will not appear in the final output of either exercises or exercises-final. This is useful to keep notes to yourself about why your template looks a certain way.

WORKSHOP

Anything in this directive will only appear in the exercises. This is a good place to add comments for what the workshoppers should be working on in this part of the code.

FINAL

Anything in this directive will only appear in the exercises-final. This is a good place to put what the end result of your workshop should look like.

Using directives

Templates can be in any text file format (.js, .md, .txt, etc...). Here's an example of a .js template that uses all of the directives:

templates/exercise-01/foo.js

// COMMENT_START
// this is the top of the file, and it has comments
// COMMENT_END
module.exports = function sum(a, b) {
  // FINAL_START you can put comments on the same line too
  return a + b
  // FINAL_END
  // WORKSHOP_START
  // return the sum of a and b
  // WORKSHOP_END and on the end line and stuff too
}

Given this input, the output would be:

exercises/exercise-01/foo.js

module.exports = function sum(a, b) {
  // return the sum of a and b
}

exercises-final/exercise-01/foo.js

module.exports = function sum(a, b) {
  return a + b
}

FAQ:

How do I make it so a file only appears in one of the output directories?

If the resulting string is empty, then no file will be written. For example, this file would only appear in exercises-final:

// FINAL_START
This will only go into the final directory
// COMMENT_START
this is a comment that wont even appear in the final directory
// COMMENT_END
because the result is an empty string for the exercises directory
// FINAL_END

Inspiration

I've done quite a few workshops that follow similar patterns to this one. I was on an airplane when I wrote most of this code and I had a blast. So it was inspiring to me :)

Other Solutions

I am unaware of other solutions. Feel free to submit a PR if you know of similar solutions.

Related Projects

  • split-guide-atom (Atom plugin): Helps creating workshops by typing the directives for you when you issue the corresponding command

Contributors

Thanks goes to these people (emoji key):


Kent C. Dodds

💻 📖 🚇 ⚠️ 💡

Jack Franklin

📖

Janis Krasemann

📖 🔧

Ray Gesualdo

💻

This project follows the all-contributors specification. Contributions of any kind welcome!

LICENSE

MIT

More Repositories

1

cross-env

🔀 Cross platform setting of environment scripts
JavaScript
6,313
star
2

match-sorter

Simple, expected, and deterministic best-match sorting of an array in JavaScript
TypeScript
3,719
star
3

advanced-react-patterns

This is the latest advanced react patterns workshop
JavaScript
2,885
star
4

babel-plugin-macros

🎣 Allows you to build simple compile-time libraries
JavaScript
2,622
star
5

react-hooks

Learn React Hooks! 🎣 ⚛
JavaScript
2,550
star
6

bookshelf

Build a ReactJS App workshop
JavaScript
2,533
star
7

kentcdodds.com

My personal website
MDX
2,143
star
8

use-deep-compare-effect

🐋 It's react's useEffect hook, except using deep comparison on the inputs, not reference equality
TypeScript
1,726
star
9

mdx-bundler

🦤 Give me MDX/TSX strings and I'll give you back a component you can render. Supports imports!
JavaScript
1,702
star
10

react-performance

Let's make our apps fast ⚡
JavaScript
1,557
star
11

advanced-react-patterns-v2

Created with CodeSandbox
JavaScript
1,499
star
12

testing-workshop

A workshop for learning how to test JavaScript applications
JavaScript
1,363
star
13

babel-plugin-preval

🐣 Pre-evaluate code at build-time
TypeScript
1,357
star
14

advanced-react-patterns-v1

The course material for my advanced react patterns course on Egghead.io
HTML
1,092
star
15

react-testing-library-course

Test React Components with Jest and React Testing Library on TestingJavaScript.com
JavaScript
1,004
star
16

testing-react-apps

A workshop for testing react applications
JavaScript
977
star
17

kcd-scripts

CLI toolbox for common scripts for my projects
JavaScript
870
star
18

stop-runaway-react-effects

🏃 Catches situations when a react use(Layout)Effect runs repeatedly in rapid succession
JavaScript
788
star
19

netlify-shortener

Your own free URL shortener with Netlify
JavaScript
778
star
20

beginners-guide-to-react

The Beginner's Guide To ReactJS
HTML
757
star
21

react-suspense

React Suspense workshop
JavaScript
746
star
22

old-kentcdodds.com

Kent's Homepage
JavaScript
736
star
23

ng-stats

Little utility to show stats about your page's angular digest/watches.
JavaScript
657
star
24

dotfiles

Shell
510
star
25

js-testing-fundamentals

Fundamentals of Testing in JavaScript on TestingJavaScript.com
JavaScript
500
star
26

react-toggled

Component to build simple, flexible, and accessible toggle components
JavaScript
453
star
27

jest-cypress-react-babel-webpack

Configure Jest for Testing JavaScript Applications and Install, Configure, and Script Cypress for JavaScript Web Applications on TestingJavaScript.com
JavaScript
442
star
28

advanced-remix

TypeScript
393
star
29

react-testing-library-examples

Created with CodeSandbox
HTML
380
star
30

testing-node-apps

Test Node.js Backends on TestingJavaScript.com
JavaScript
365
star
31

es6-workshop

A very hands on 👐 workshop 💻 about ES6 and beyond.
JavaScript
362
star
32

es6-todomvc

The vanillajs example converted to es6
JavaScript
353
star
33

babel-plugin-codegen

💥 Generate code at build-time
TypeScript
347
star
34

eslint-config-kentcdodds

ESLint configuration for projects that I do... Feel free to use this!
JavaScript
338
star
35

cloc

An npm module for distributing cloc by Al Danial
JavaScript
325
star
36

asts-workshop

Improved productivity 💯 with the practical 🤓 use of the power 💪 of Abstract Syntax Trees 🌳 to lint ⚠️ and transform 🔀 your code
JavaScript
295
star
37

how-jest-mocking-works

JavaScript
294
star
38

js-mocking-fundamentals

JavaScript Mocking Fundamentals on TestingJavaScript.com
JavaScript
281
star
39

webpack-config-utils

Utilities to help your webpack config be easier to read
JavaScript
262
star
40

express-app-example

How I structure Express Apps (example repo)
JavaScript
261
star
41

dom-testing-library-with-anything

Use DOM Testing Library to test any JS framework on TestingJavaScript.com
JavaScript
217
star
42

learn-react

Learn React with a laser focused, guided approach.
JavaScript
213
star
43

the-webs-next-transition

TypeScript
211
star
44

modern-react

workshop about React's hottest new features in 16.7.0
JavaScript
207
star
45

react-jest-workshop

JavaScript
199
star
46

react-github-profile

JavaScript
199
star
47

react-ava-workshop

🐯 A workshop repository for testing React ⚛ with AVA 🚀 --> slides
JavaScript
192
star
48

api-check

VanillaJS version of ReactJS propTypes
JavaScript
191
star
49

starwars-names

Get a random Star Wars name
JavaScript
185
star
50

import-all.macro

A babel-macro that allows you to import all files that match a glob
JavaScript
177
star
51

remix-todomvc

An Implementation of TodoMVC with Remix
TypeScript
172
star
52

rtl-css-js

RTL for CSS in JS
JavaScript
162
star
53

react-workshop-app

An abstraction for all my React workshops
TypeScript
144
star
54

generator-kcd-oss

A yeoman generator for my open source modules
JavaScript
140
star
55

remix-workshop

TypeScript
133
star
56

issue-template

A way for github projects to make templates for github issues.
JavaScript
131
star
57

react-hooks-and-suspense-egghead-playlist

This is the code for the egghead playlist "React Hooks and Suspense"
JavaScript
128
star
58

modern-javascript

Get up to speed on the latest, most useful JavaScript features to level up your programming
JavaScript
123
star
59

kcd-discord-bot-v1

The bot for the KCD discord community
TypeScript
123
star
60

app-dev-tools

An example of how to create and hook up App DevTools to improve your development productivity of your application
JavaScript
122
star
61

preval.macro

Pre-evaluate code at build-time with babel-macros
JavaScript
120
star
62

kcd-learning-clubs-ideas

📍 Ideas for curriculum and schedule templates for KCD Learning Clubs
106
star
63

simply-react

JavaScript
104
star
64

nps-utils

Utilities for http://npm.im/nps (npm-package-scripts)
JavaScript
101
star
65

glamorous-website

This is still a work in progress
JavaScript
98
star
66

jest-glamor-react

Jest utilities for Glamor and React
JavaScript
98
star
67

react-hooks-pitfalls

The slides and code examples for my talk "React Hook Pitfalls"
JavaScript
94
star
68

webpack-validator-DEPRECATED

Use this to save yourself some time when working on a webpack configuration.
JavaScript
93
star
69

onewheel-blog

TypeScript
90
star
70

remix-tutorial-walkthrough

I live streamed working through the Remix Jokes App Tutorial
TypeScript
87
star
71

rebase-and-merge

Making this a reality ☞
JavaScript
82
star
72

managing-state-management-slides

79
star
73

css-in-js-precompiler

WORK IN PROGRESS: Precompiles CSS-in-JS objects to CSS strings
JavaScript
72
star
74

create-react-app-react-testing-library-example

JavaScript
67
star
75

10-practical-js-features

JavaScript
67
star
76

rename-gh-to-main

JavaScript
67
star
77

full-stack-components

TypeScript
66
star
78

fakebooks-remix

The Remix version of the fakebooks app demonstrated on https://remix.run. Check out the CRA version: https://github.com/kentcdodds/fakebooks-cra
TypeScript
66
star
79

cypress-testing-workshop

A workshop for learning how to write cypress tests
JavaScript
65
star
80

prettier-eslint-atom

DEPRECATED IN FAVOR OF prettier-atom + ESLint integration
JavaScript
64
star
81

repeat-todo

A simple app I made for my wife
JavaScript
63
star
82

why-react-hooks

Talk about React hooks
JavaScript
62
star
83

codegen.macro

JavaScript
61
star
84

talks

A repo with links to talks that I've given
59
star
85

quick-stack

TypeScript
57
star
86

binode

JavaScript
57
star
87

airtable-netlify-short-urls

There's a simpler version using Netlify redirects instead of Airtable here
JavaScript
57
star
88

fully-typed-web-apps-demo

TypeScript
53
star
89

argv-set-env

Set environment variables in npm scripts
JavaScript
52
star
90

react-test-context-provider

A function that allows you to specify context to pass to a child component (intended for testing only).
JavaScript
48
star
91

concurrent-react

React Suspense Egghead course
JavaScript
47
star
92

incremental-react-router-to-remix-upgrade-path

JavaScript
46
star
93

remix-mdx

JavaScript
45
star
94

setup-prettier

JavaScript
44
star
95

podcastify-dir

Take a directory of audio files and syndicate them with an rss feed
JavaScript
42
star
96

aha-programming-slides

JavaScript
42
star
97

workshop-setup

Verify and setup a repository for workshop attendees
JavaScript
42
star
98

jest-esmodules

JavaScript
40
star
99

typing-for-kids

A little app I made for my kids for Christmas :)
JavaScript
40
star
100

react-suspense-simple-example

JavaScript
39
star