├── .gitignore
├── src
    ├── index.js
    ├── renderSlot.js
    ├── prefixKeys.js
    ├── prefixKeys.test.js
    ├── mergeProps.js
    ├── mergeProps.test.js
    ├── Slot.js
    └── Slot.test.js
├── tsconfig.json
├── LICENSE
├── package.json
└── README.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | 
4 | *.log
5 | .DS_Store


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export { default as slot } from './renderSlot'
2 | export { default as Slot } from './Slot'
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "allowJs": true,
 4 |     "module": "commonjs",
 5 |     "target": "es2015",
 6 |     "moduleResolution": "node",
 7 |     "jsx": "react",
 8 |     "reactNamespace": "React",
 9 |     "outDir": "lib",
10 |     "typeRoots": [
11 |       "node_modules/@types"
12 |     ]
13 |   },
14 |   "include": [
15 |     "./src/**/*.js"
16 |   ]
17 | }


--------------------------------------------------------------------------------
/src/renderSlot.js:
--------------------------------------------------------------------------------
 1 | import * as React from 'react'
 2 | 
 3 | export default function slot (name, children) {
 4 |   const slotNode = findNamedSlotNode(name, children)
 5 | 
 6 |   if (slotNode) {
 7 |     return slotNode.props.children
 8 |   } else {
 9 |     return null
10 |   }
11 | }
12 | 
13 | function findNamedSlotNode (name, children) {
14 |   const node = React.Children.toArray(children).filter(child => {
15 |     const node = child
16 |     return node.props && node.props.slot === name
17 |   })[0]
18 | 
19 |   return node
20 | }
21 | 


--------------------------------------------------------------------------------
/src/prefixKeys.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Prefix all keys in the specified object and save them on a new object.
 3 |  *
 4 |  * Example:
 5 |  * const o = prefixKeys({ toggle: true, target: 'spy' }, 'data-')
 6 |  * // o will be: { 'data-toggle': true, 'data-target': 'spy' }
 7 |  *
 8 |  * @param {object} obj The object whoes keys/properties will be prefixed
 9 |  * @param {string} prefix The prefix to apply to each key in obj
10 |  * @param {object} dest The optional destination object to save the new keys to
11 |  * @return {{[key:string]:any}}
12 |  */
13 | export default function prefixKeys (obj, prefix, dest = {}) {
14 |   return Object.keys(obj).reduce((o, key) => {
15 |     o[`${prefix}${key}`] = obj[key]
16 |     return o
17 |   }, dest || {})
18 | }
19 | 


--------------------------------------------------------------------------------
/src/prefixKeys.test.js:
--------------------------------------------------------------------------------
 1 | import * as assert from 'assert'
 2 | import prefixKeys from './prefixKeys'
 3 | 
 4 | describe('prefixKeys', function () {
 5 |   it('should prefix each key with "data-"', function () {
 6 |     const src = { one: 'one', two: 'two', three: 37 }
 7 |     const o = prefixKeys(src, 'data-')
 8 | 
 9 |     assert.ok(src !== o, 'result is referentially equal to src object')
10 |     assert.deepStrictEqual(o, {
11 |       'data-one': 'one',
12 |       'data-two': 'two',
13 |       'data-three': 37
14 |     })
15 |   })
16 | 
17 |   it('should prefix each key with "data-" and save each key to dest', function () {
18 |     const src = { one: 'one', two: 'two', three: 37 }
19 |     const dest = { prop: 'value' }
20 |     const o = prefixKeys(src, 'data-', dest)
21 | 
22 |     assert.ok(o === dest, 'result is not referentially equal to dest object')
23 |     assert.deepStrictEqual(o, {
24 |       'data-one': 'one',
25 |       'data-two': 'two',
26 |       'data-three': 37,
27 |       'prop': 'value'
28 |     })
29 |   })
30 | })
31 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright © 2017 Darren Schnare
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/src/mergeProps.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Merges two React property objects into a new object and returns it. The
 3 |  * property names in the ignore array option will not be merged from the second
 4 |  * property object.
 5 |  *
 6 |  * Example:
 7 |  * const p mergeProps(
 8 |  *  { id: 'id', className: 'one' },
 9 |  *  { className: 'two three one', id: 'id2 },
10 |  *  { ignore: [ 'id' ] }
11 |  * )
12 |  * // p will be: { id: 'id', className: 'one two three' }
13 |  *
14 |  * @param {{[key:string]:any}} a
15 |  * @param {{[key:string]:any}} b
16 |  * @return {{[key:string]:any}}
17 |  */
18 | export default function mergeProps (a, b, { ignore = [] } = {}) {
19 |   b = Object.assign({}, b)
20 | 
21 |   ignore.forEach(prop => delete b[prop])
22 |   const className = typeof b.className === 'string'
23 |     ? b.className.split(' ')
24 |     : b.className
25 |   delete b.className
26 | 
27 |   if (a.className || className) {
28 |     a.className = [].concat(
29 |       typeof a.className === 'string'
30 |         ? a.className.split(' ')
31 |         : a.className
32 |       )
33 |       .concat(className)
34 |       .filter(Boolean)
35 |       .reduce((a, b) => a.indexOf(b) < 0 ? a.concat(b) : a, [])
36 |       .join(' ')
37 |   }
38 | 
39 |   return Object.assign({}, a, b)
40 | }
41 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-slot",
 3 |   "version": "0.1.2",
 4 |   "description": "Slot-based content distribution component for React",
 5 |   "main": "lib/index.js",
 6 |   "files": [
 7 |     "lib"
 8 |   ],
 9 |   "directories": {
10 |     "lib": "lib"
11 |   },
12 |   "keywords": [
13 |     "react",
14 |     "content distribution",
15 |     "layout",
16 |     "vuejs",
17 |     "vue",
18 |     "slots",
19 |     "slot"
20 |   ],
21 |   "scripts": {
22 |     "prepublish": "npm run compile",
23 |     "compile": "tsc -p .",
24 |     "compile:watch": "npm run compile -- --watch",
25 |     "test": "mocha lib/*.test.js"
26 |   },
27 |   "author": "Darren Schnare",
28 |   "license": "MIT",
29 |   "repository": {
30 |     "type": "git",
31 |     "url": "https://github.com/dschnare/react-slot.git"
32 |   },
33 |   "bugs": {
34 |     "url": "https://github.com/dschnare/react-slot/issues"
35 |   },
36 |   "dependencies": {
37 |     "prop-types": "^15.5.10"
38 |   },
39 |   "peerDependencies": {
40 |     "react": "^15"
41 |   },
42 |   "devDependencies": {
43 |     "@types/prop-types": "^15.5.1",
44 |     "@types/react": "^15.0.24",
45 |     "enzyme": "^2.8.2",
46 |     "mocha": "^3.4.1",
47 |     "react": "^15.5.4",
48 |     "react-dom": "^15.5.4",
49 |     "react-test-renderer": "^15.5.4",
50 |     "typescript": "^2.3.2"
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/mergeProps.test.js:
--------------------------------------------------------------------------------
 1 | import * as assert from 'assert'
 2 | import mergeProps from './mergeProps'
 3 | 
 4 | describe('mergeProps', function () {
 5 |   it('should merge accept arrays as source objects', function () {
 6 |     const a = { one: 1, two: 2 }
 7 |     const b = [ 0, 1, 2 ]
 8 |     const c = mergeProps(a, b)
 9 | 
10 |     assert.ok(c !== a, 'result is referentially equal to source object')
11 |     assert.deepStrictEqual(c, {
12 |       one: 1,
13 |       two: 2,
14 |       0: 0,
15 |       1: 1,
16 |       2: 2
17 |     })
18 | 
19 |     const e = mergeProps(b, a)
20 |     assert.strictEqual(typeof e, 'object')
21 |     assert.deepStrictEqual(e, {
22 |       one: 1,
23 |       two: 2,
24 |       0: 0,
25 |       1: 1,
26 |       2: 2
27 |     })
28 |   })
29 | 
30 |   it('should merge properties into a new object', function () {
31 |     const a = { one: 1, two: 2 }
32 |     const b = { three: 3, four: 4, one: 'one' }
33 |     const c = mergeProps(a, b)
34 | 
35 |     assert.ok(c !== a, 'result is referentially equal to source object')
36 |     assert.deepStrictEqual(c, {
37 |       one: 'one',
38 |       two: 2,
39 |       three: 3,
40 |       four: 4
41 |     })
42 |   })
43 | 
44 |   it('should merge properties into a new object and ignore the specified properties', function () {
45 |     const a = { one: 1, two: 2, className: 'a b' }
46 |     const b = { three: 3, four: 4, one: 'one', className: 'a c d' }
47 |     const c = mergeProps(a, b, { ignore: [ 'one', 'four' ] })
48 | 
49 |     assert.deepStrictEqual(c, {
50 |       one: 1,
51 |       two: 2,
52 |       three: 3,
53 |       className: 'a b c d'
54 |     })
55 |   })
56 | })
57 | 


--------------------------------------------------------------------------------
/src/Slot.js:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import * as PropTypes from 'prop-types'
  3 | import prefixKeys from './prefixKeys'
  4 | import mergeProps from './mergeProps'
  5 | 
  6 | export default class Slot extends React.Component {
  7 |   static propTypes = {
  8 |     content: PropTypes.node.isRequired,
  9 |     name: PropTypes.string,
 10 |     children: PropTypes.node,
 11 |     id: PropTypes.string,
 12 |     className: PropTypes.string,
 13 |     dataset: PropTypes.object,
 14 |     role: PropTypes.string,
 15 |     as: PropTypes.oneOfType([
 16 |       PropTypes.string,
 17 |       PropTypes.func
 18 |     ])
 19 |   }
 20 | 
 21 |   static defaultProps = {
 22 |     name: '',
 23 |     id: '',
 24 |     className: '',
 25 |     dataset: {},
 26 |     role: '',
 27 |     as: 'div'
 28 |   }
 29 | 
 30 |   render () {
 31 |     if (this.isDefaultSlot()) {
 32 |       return this.renderDefaultSlot()
 33 |     } else {
 34 |       return this.renderNamedSlot()
 35 |     }
 36 |   }
 37 | 
 38 |   isDefaultSlot () {
 39 |     const { name = '' } = this.props
 40 |     return !name
 41 |   }
 42 | 
 43 |   renderDefaultSlot () {
 44 |     const { role, id, dataset = {}, children, as: slot = 'div' } = this.props
 45 |     let attrs = prefixKeys(dataset, 'data-')
 46 |     let slotNode = this.findDefaultSlotNode()
 47 |     let content = []
 48 | 
 49 |     if (id) attrs.id = id
 50 |     if (role) attrs.role = role
 51 |     attrs.className = this.getSlotClassName()
 52 | 
 53 |     if (slotNode) {
 54 |       const opts = { ignore: [ 'slot', 'children' ] }
 55 |       attrs = mergeProps(attrs, slotNode.props, opts)
 56 |       content = slotNode.props.children
 57 |     } else {
 58 |       content = this.findUnslottedNodes()
 59 |     }
 60 | 
 61 |     content = React.Children.count(content) === 0 ? children : content
 62 | 
 63 |     if (React.Children.count(content) > 0) {
 64 |       return (
 65 |         React.createElement(slot, attrs, content)
 66 |       )
 67 |     } else {
 68 |       return null
 69 |     }
 70 |   }
 71 | 
 72 |   renderNamedSlot () {
 73 |     const {
 74 |       role,
 75 |       name,
 76 |       id,
 77 |       dataset = {},
 78 |       children,
 79 |       as: slot = 'div'
 80 |     } = this.props
 81 |     let attrs = prefixKeys(dataset, 'data-')
 82 |     let slotNode = this.findNamedSlotNode(name)
 83 |     let content = []
 84 | 
 85 |     if (id) attrs.id = id
 86 |     if (role) attrs.role = role
 87 |     attrs.className = this.getSlotClassName()
 88 | 
 89 |     if (slotNode) {
 90 |       const opts = { ignore: [ 'slot', 'children' ] }
 91 |       attrs = mergeProps(attrs, slotNode.props, opts)
 92 |       content = slotNode.props.children
 93 |     }
 94 | 
 95 |     content = React.Children.count(content) === 0 ? children : content
 96 | 
 97 |     if (React.Children.count(content) > 0) {
 98 |       return (
 99 |         React.createElement(slot, attrs, content)
100 |       )
101 |     } else {
102 |       return null
103 |     }
104 |   }
105 | 
106 |   getSlotClassName () {
107 |     const { name = '', className = '' } = this.props
108 |     return [ `slot-${name || 'default'}`, className ]
109 |       .filter(Boolean)
110 |       .reduce((a, b) => a.indexOf(b) < 0 ? a.concat(b) : a,[])
111 |       .join(' ')
112 |   }
113 | 
114 |   findNamedSlotNode (name) {
115 |     const { content } = this.props
116 |     const node = React.Children.toArray(content).filter(child => {
117 |       const node = child
118 |       return node.props && node.props.slot === name
119 |     })[0]
120 | 
121 |     return node
122 |   }
123 | 
124 |   findDefaultSlotNode () {
125 |     const { content } = this.props
126 |     const node = React.Children.toArray(content).filter(node => {
127 |       const props = node.props || {}
128 |       return props.slot === true || props.slot === 'default'
129 |     })[0]
130 | 
131 |     return node
132 |   }
133 | 
134 |   findUnslottedNodes () {
135 |     const { content } = this.props
136 |     return React.Children.toArray(content).filter(node => {
137 |       return !node.props || !('slot' in node.props)
138 |     }).filter(Boolean)
139 |   }
140 | }
141 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # React Slot
  2 | 
  3 | Slot-based content distribution component for React. The technique was highly
  4 | influenced by the content distribution techniques used by
  5 | [Vuejs](http://vuejs.org/v2/guide/components.html#Content-Distribution-with-Slots).
  6 | 
  7 | ## Install
  8 | 
  9 | ```shell
 10 | npm install react@">=15" react-dom@">=15" react-slot -S
 11 | ```
 12 | 
 13 | ## Quick Start
 14 | 
 15 | ```jsx
 16 | /*
 17 |   LayoutDefault.js
 18 |   Generates a slotted HTML layout like the following:
 19 | 
 20 |   <div class="layout-default">
 21 |     <header class="slot-header">Welcome!</header>
 22 |     <div class="slot-default main" role="main"></div>
 23 |     <div class="slot-info">Copyright 2017</div>
 24 |     <footer class="slot-footer"></footer>
 25 |   </div>
 26 | */
 27 | import * as React from 'react'
 28 | import { Slot } from 'react-slot'
 29 | 
 30 | export default function LayoutDefault (props) {
 31 |   const { children } = props
 32 |   return (
 33 |     <div className='layout-default'>
 34 |       <Slot name='header' as='header' content={children}>Welcome!</Slot>
 35 |       <Slot className='main' role='main' content={children} />
 36 |       <Slot name='info' content={children}>Copyright 2017</Slot>
 37 |       <Slot name='footer' as='footer' content={children} />
 38 |     </div>
 39 |   )
 40 | }
 41 | 
 42 | /*
 43 |   PageHome.js
 44 |   Create a page that will insert content into a layout's slots.
 45 |   Generates HTML like the following (depends on what layout is used):
 46 | 
 47 |   <div class="page-home">
 48 |     <div class="layout-default">
 49 |       <header class="slot-header"><h1>Home</h1></header>
 50 |       <div class="slot-default main" role="main">The main content</div>
 51 |       <div class="slot-info">Copyright 2017</div>
 52 |     </div>
 53 |   </div>
 54 | */
 55 | import * as React from 'react'
 56 | 
 57 | export default PageHome extends React.Component {
 58 |   static propsTypes = {
 59 |     layout: PropTypes.func.isRequired
 60 |   }
 61 | 
 62 |   render () {
 63 |     const { layout } = this.props
 64 | 
 65 |     return (
 66 |       <div className='page-home'>
 67 |         <layout>
 68 |           <div slot='header'><h1>Home</h1></div>
 69 |           <div slot>
 70 |             The main content
 71 |           </div>
 72 |         </layout>
 73 |       </div>
 74 |     )
 75 |   }
 76 | }
 77 | 
 78 | // App.js
 79 | import * as React from 'react'
 80 | import * as ReactDOM from 'react-dom'
 81 | import PageHome from './PageHome'
 82 | 
 83 | const page = <PageHome layout={DefaultLayout} />
 84 | 
 85 | ReactDOM.render(
 86 |   page,
 87 |   document.getElementById('app')
 88 | )
 89 | ```
 90 | 
 91 | ## API
 92 | 
 93 | ### Slot
 94 | 
 95 | Slot is a component that is meant to compose your layouts with. These act
 96 | as the points where a layout can be altered by a parent using the layout
 97 | component. The slot without a name is known as the default slot.
 98 | 
 99 | **Props**
100 | 
101 | - `content` *[required]* The React children of the parent component
102 | - `children` The default content to render if no content is inserted from the parent component
103 | - `name` The name of this slot (inserted as class name 'slot-${name}')
104 | - `id` The HTML id
105 | - `className` Additional class names
106 | - `dataset` *[default: {}]* An object with keys to set as 'data-' attributes (keys must not contain a 'data-' prefix)
107 | - `role` The HTML role
108 | - `as` *[default: 'div']* The type of React element (string or function) to create the root element as
109 | 
110 | Something to keep in mind, Slot elements will render nothing if they don't have
111 | any default content and the parent component didn't insert any content.
112 | 
113 | ```jsx
114 | <Slot name='my-slot' content={children} />
115 | ```
116 | 
117 | Full Example:
118 | 
119 | ```jsx
120 | /*
121 |   A layout that will render HTML like the following:
122 | 
123 |   <div class="layout-default">
124 |     <header>Welcome!</header>
125 |     <div class="slot-default main" role="main"></div>
126 |     <div class="slot-info">Copyright 2017</div>
127 |     <footer class="slot-footer"></footer>
128 |   </div>
129 | */
130 | const LayoutDefault = props => {
131 |   const { children } = props
132 |   return (
133 |     <Layout className='layout-default'>
134 |       <Slot name='header' as='header' content={children}>Welcome!</Slot>
135 |       <Slot className='main' role='main' content={children} />
136 |       <Slot name='info' content={children}>Copyright 2017</Slot>
137 |       <Slot name='footer' as='footer' content={children} />
138 |     </Layout>
139 |   )
140 | }
141 | ```
142 | 
143 | To insert content into a `Slot` the parent component using the layout needs to
144 | designate React subtrees to use a slot by setting the `slot` prop on an element
145 | to have its children inserted into the slot with the mathcing name (if one
146 | exists). *Only the first matching React subtree will have its children inserted.*
147 | 
148 | ```jsx
149 | <div slot='slot-name'>...inserted into the slot-name slot...</div>
150 | ```
151 | 
152 | Any React elements with a `slot` set to `"default"`, or `true` will have thier
153 | children inserted into the default slot (if one exists).
154 | 
155 | ```jsx
156 | <div slot>...inserted into the default slot...</div>
157 | <div slot='default'>...inserted into the default slot...</div>
158 | ```
159 | 
160 | Since only the children of a react subtree are inserted into a slot, all props
161 | on the subtree root node are merged with the props defined on the `<Slot>`
162 | element in the layout.
163 | 
164 | ```jsx
165 | // in the layout...
166 | <Slot name='footer' className='footer' />
167 | 
168 | // in the parent component...
169 | <Layout>
170 |   <div slot='footer' className='my-footer'>The Footer</div>
171 | </Layout>
172 | 
173 | // Results in the footer slot being rendered as...
174 | <div class="slot-footer footer my-footer">TheFooter</div>
175 | ```
176 | 
177 | Also, if a default slot exists and no slotted subtree is found with the `slot`
178 | prop set to `"default"` or `true`, then all React nodes without a slot
179 | designation will be inserted into the default slot.
180 | 
181 | ```jsx
182 | <div slot='slot-name'>...</div>
183 | <div>Default content1</div>
184 | <div>More default content</div>
185 | <div slot='slot-name2'>...</div>
186 | ```
187 | 
188 | Example Usage of `LayoutDefault`:
189 | 
190 | ```jsx
191 | /*
192 |   A page component that uses LayoutDefault to structure its content. This
193 |   will render a page that looks like this:
194 | 
195 |   <div class="layout-default">
196 |     <header>Welcome!</header>
197 |     <div class="slot-default main" role="main">
198 |       <div>Hello World!</div>
199 |       <p>This is some more content inserted into the default slot</p>
200 |     </div>
201 |     <div class="slot-info">Copyright 2018</div>
202 |   </div>
203 | */
204 | const Page = props => {
205 |   return (
206 |     <LayoutDefault>
207 |       <div slot='info'>Copyright 2018</div>
208 |       <div>Hello World!</div>
209 |       <p>This is some more content inserted into the default slot</p>
210 |     </LayoutDefault>
211 |   )
212 | }
213 | ```
214 | 
215 | Additionally, Slots can be nested to provide parent components with increasing
216 | granularity when overriding slots.
217 | 
218 | ```jsx
219 | <Slot name='outer' content={children}>
220 |   This is the content
221 |   <Slot name='inner' content={children}>
222 |     This is the inner content
223 |   </Slot>
224 | </Slot>
225 | ```
226 | 
227 | Then to insert into these slots you have a choice to override the entire `outer`
228 | slot...
229 | 
230 | ```jsx
231 | <div slot='outer'>...</div>
232 | ```
233 | 
234 | ...or just the `inner` slot.
235 | 
236 | ```jsx
237 | <div slot='inner'>....</div>
238 | ```
239 | 
240 | But if the `outer` slot is overrdden then the entirety of its contents will be
241 | replaced.
242 | 
243 | ### slot(name, children)
244 | 
245 | This function will pull out the children of any React subtree designated by the
246 | `slot` prop that matches the `name` argument. This function will not render a
247 | root node at all, this is left up to the parent component to provide. This gives
248 | you more control over a slot's root element.
249 | 
250 | ```jsx
251 | <Slot name='footer' content={children}>
252 |   Copyright {slot('copyrightYear', children) || '2017'}
253 | </Slot>
254 | ```
255 | 
256 | Then in the parent component:
257 | 
258 | ```jsx
259 | // Replace the entire footer...
260 | <div slot='footer'>...</div>
261 | 
262 | // ...or just replace the copyright year
263 | <div slot='copyrightYear'>2018</div>
264 | ```
265 | 
266 | ## Related Modules
267 | 
268 | - [react-layout](https://npmjs.org/react-layout)
269 | 


--------------------------------------------------------------------------------
/src/Slot.test.js:
--------------------------------------------------------------------------------
  1 | import * as React from 'react'
  2 | import * as assert from 'assert'
  3 | import { shallow, render } from 'enzyme'
  4 | import Slot from './Slot'
  5 | import prefixKeys from './prefixKeys'
  6 | 
  7 | describe('Slot', function () {
  8 |   it('should render a <div> with className, id and data- attributes', function () {
  9 |     const id = 'my-id'
 10 |     const name = 'MySlot'
 11 |     const className = 'testing'
 12 |     const dataset = { target: '#thing', scroll: 'spy' }
 13 |     const dataAttributes = prefixKeys(dataset, 'data-')
 14 |     const wrapper = shallow(
 15 |       <Slot name={name}
 16 |         id={id}
 17 |         dataset={dataset}
 18 |         content={''}
 19 |         className={className}>
 20 |         {''}
 21 |       </Slot>
 22 |     )
 23 | 
 24 |     assert.ok(wrapper.equals(
 25 |       <div
 26 |         id={id}
 27 |         {...dataAttributes}
 28 |         className={'slot-' + name + ' ' + className}>
 29 |         {''}
 30 |       </div>
 31 |     ))
 32 |   })
 33 | 
 34 |   it('should render with default content', function () {
 35 |     const wrapper = render(
 36 |       <div>
 37 |         <h1>Layout</h1>
 38 |         <Slot className='body' content={''}>
 39 |           Hello World!
 40 |         </Slot>
 41 |         <Slot name='footer' content={''}>
 42 |           The Footer
 43 |         </Slot>
 44 |         <Slot name='stuff' content={''} />
 45 |         <Slot name='stuff2' content={''}>{''}</Slot>
 46 |         <Slot name='footer' content={''} />
 47 |       </div>
 48 |     )
 49 | 
 50 |     assert.strictEqual(wrapper.html(), [
 51 |       '<div>',
 52 |         '<h1>Layout</h1>',
 53 |         '<div class="slot-default body">',
 54 |           'Hello World!',
 55 |         '</div>',
 56 |         '<div class="slot-footer">',
 57 |           'The Footer',
 58 |         '</div>',
 59 |         '<div class="slot-stuff2"></div>',
 60 |       '</div>'
 61 |     ].join(''))
 62 |   })
 63 | 
 64 |   it('should render with concrete and default content', function () {
 65 |     const LayoutDefault = props => {
 66 |       const { children } = props
 67 |       return (
 68 |         <div className='layout-default'>
 69 |           <Slot className='body' content={children}>
 70 |             Hello World!
 71 |           </Slot>
 72 |           <Slot name='footer' content={children}>
 73 |             The Footer
 74 |           </Slot>
 75 |           <Slot name='footer' className='big-foot' content={children} />
 76 |         </div>
 77 |       )
 78 |     }
 79 |     const wrapper = render(
 80 |       <LayoutDefault>
 81 |         <div slot='footer' className='new-footer'>
 82 |           The New Footer
 83 |         </div>
 84 |         <div slot="nothing">
 85 |           Gonzo
 86 |         </div>
 87 |       </LayoutDefault>
 88 |     )
 89 | 
 90 |     assert.strictEqual(wrapper.html(), [
 91 |       '<div class="layout-default">',
 92 |         '<div class="slot-default body">',
 93 |           'Hello World!',
 94 |         '</div>',
 95 |         '<div class="slot-footer new-footer">',
 96 |           'The New Footer',
 97 |         '</div>',
 98 |         '<div class="slot-footer big-foot new-footer">',
 99 |           'The New Footer',
100 |         '</div>',
101 |       '</div>'
102 |     ].join(''))
103 |   })
104 | 
105 |   it('should render unamed default slot with concrete content', function () {
106 |     const LayoutDefault = props => {
107 |       const { children } = props
108 |       return (
109 |         <div className='layout-default'>
110 |           <Slot className='body' content={children}>
111 |             Hello World!
112 |           </Slot>
113 |           <Slot name='footer' content={children}>
114 |             The Footer
115 |           </Slot>
116 |         </div>
117 |       )
118 |     }
119 |     const wrapper = render(
120 |       <LayoutDefault>
121 |         <div slot className='new-body body'>
122 |           The New Body
123 |         </div>
124 |       </LayoutDefault>
125 |     )
126 | 
127 |     assert.strictEqual(wrapper.html(), [
128 |       '<div class="layout-default">',
129 |         '<div class="slot-default body new-body">',
130 |           'The New Body',
131 |         '</div>',
132 |         '<div class="slot-footer">',
133 |           'The Footer',
134 |         '</div>',
135 |       '</div>'
136 |     ].join(''))
137 |   })
138 | 
139 |   it('should render named default slot with concrete content', function () {
140 |     const LayoutDefault = props => {
141 |       const { children } = props
142 |       return (
143 |         <div className='layout-default'>
144 |           <Slot className='body' content={children}>
145 |             Hello World!
146 |           </Slot>
147 |           <Slot name='footer' content={children}>
148 |             The Footer
149 |           </Slot>
150 |         </div>
151 |       )
152 |     }
153 |     const wrapper = render(
154 |       <LayoutDefault>
155 |         <div slot='default' className='new-body body'>
156 |           The New Body
157 |         </div>
158 |       </LayoutDefault>
159 |     )
160 | 
161 |     assert.strictEqual(wrapper.html(), [
162 |       '<div class="layout-default">',
163 |         '<div class="slot-default body new-body">',
164 |           'The New Body',
165 |         '</div>',
166 |         '<div class="slot-footer">',
167 |           'The Footer',
168 |         '</div>',
169 |       '</div>'
170 |     ].join(''))
171 |   })
172 | 
173 |   it('should render default slot with unslotted concrete content', function () {
174 |     const LayoutDefault = props => {
175 |       const { children } = props
176 |       return (
177 |         <div className='layout-default'>
178 |           <Slot className='body' content={children}>
179 |             Hello World!
180 |           </Slot>
181 |           <Slot name='footer' content={children}>
182 |             The Footer
183 |           </Slot>
184 |         </div>
185 |       )
186 |     }
187 |     const wrapper = render(
188 |       <LayoutDefault>
189 |         <div>The New Body</div>
190 |         <div slot='footer'>
191 |           The New Footer
192 |         </div>
193 |         <h1>Headline</h1>
194 |       </LayoutDefault>
195 |     )
196 | 
197 |     assert.strictEqual(wrapper.html(), [
198 |       '<div class="layout-default">',
199 |         '<div class="slot-default body">',
200 |           '<div>The New Body</div>',
201 |           '<h1>Headline</h1>',
202 |         '</div>',
203 |         '<div class="slot-footer">',
204 |           'The New Footer',
205 |         '</div>',
206 |       '</div>'
207 |     ].join(''))
208 |   })
209 | 
210 |   it('should render nested <Slot> elements', function () {
211 |     const Footer = props => (<footer {...props} />)
212 |     class Body extends React.Component {
213 |       render () {
214 |         return (<main {...this.props} />)
215 |       }
216 |     }
217 |     const LayoutDefault = props => {
218 |       const { children } = props
219 |       return (
220 |         <div className='layout-default'>
221 |           <Slot className='body' as={Body} content={children}>
222 |             Hello World!
223 |             <Slot name='nothing' content={children} />
224 |           </Slot>
225 |           <Slot name='footer' as={Footer} content={children}>
226 |             The Footer <Slot name='footer-inner' content={children} />
227 |           </Slot>
228 |         </div>
229 |       )
230 |     }
231 |     const wrapper = render(
232 |       <LayoutDefault>
233 |         <div slot className='new-body'>
234 |           The New Body
235 |         </div>
236 |         <div slot='footer-inner'>Boom</div>
237 |       </LayoutDefault>
238 |     )
239 | 
240 |     assert.strictEqual(wrapper.html(), [
241 |       '<div class="layout-default">',
242 |         '<main class="slot-default body new-body">',
243 |           'The New Body',
244 |         '</main>',
245 |         '<footer class="slot-footer">',
246 |           'The Footer ',
247 |           '<div class="slot-footer-inner">Boom</div>',
248 |         '</footer>',
249 |       '</div>'
250 |     ].join(''))
251 |   })
252 | 
253 |   it('should override nested <Slot> elements when parent slots are overridden', function () {
254 |     const Footer = props => (<footer {...props} />)
255 |     class Body extends React.Component {
256 |       render () {
257 |         return (<main {...this.props} />)
258 |       }
259 |     }
260 |     const LayoutDefault = props => {
261 |       const { children } = props
262 |       return (
263 |         <div className='layout-default'>
264 |           <Slot className='body' as={Body} content={children}>
265 |             Hello World!
266 |             <Slot name='nothing' content={children} />
267 |           </Slot>
268 |           <Slot name='footer' as={Footer} content={children}>
269 |             The Footer <Slot name='footer-inner' content={children} />
270 |           </Slot>
271 |         </div>
272 |       )
273 |     }
274 |     const wrapper = render(
275 |       <LayoutDefault>
276 |         <div slot className='new-body'>
277 |           The New Body
278 |         </div>
279 |         <div slot='footer'>The Footer Boom</div>
280 |       </LayoutDefault>
281 |     )
282 | 
283 |     assert.strictEqual(wrapper.html(), [
284 |       '<div class="layout-default">',
285 |         '<main class="slot-default body new-body">',
286 |           'The New Body',
287 |         '</main>',
288 |         '<footer class="slot-footer">',
289 |           'The Footer Boom',
290 |         '</footer>',
291 |       '</div>'
292 |     ].join(''))
293 |   })
294 | 
295 |   it('should render nested layouts as expected', function () {
296 |     const LayoutDefault = props => {
297 |       const { children } = props
298 |       return (
299 |         <div className='layout-default'>
300 |           <Slot className='body' content={children}>
301 |             Hello World!
302 |           </Slot>
303 |           <Slot name='footer' as='footer' content={children}>
304 |             The Footer
305 |           </Slot>
306 |         </div>
307 |       )
308 |     }
309 |     const wrapper = render(
310 |       <LayoutDefault>
311 |         <div slot className='new-body'>
312 |           <span>The New Body</span>
313 |           <LayoutDefault>
314 |             <div slot='footer' className='inner-footer'>
315 |               Hello Footer!
316 |             </div>
317 |           </LayoutDefault>
318 |         </div>
319 |       </LayoutDefault>
320 |     )
321 | 
322 |     assert.strictEqual(wrapper.html(), [
323 |       '<div class="layout-default">',
324 |         '<div class="slot-default body new-body">',
325 |           '<span>The New Body</span>',
326 |           '<div class="layout-default">',
327 |             '<div class="slot-default body">',
328 |               'Hello World!',
329 |             '</div>',
330 |             '<footer class="slot-footer inner-footer">',
331 |               'Hello Footer!',
332 |             '</footer>',
333 |           '</div>',
334 |         '</div>',
335 |         '<footer class="slot-footer">',
336 |           'The Footer',
337 |         '</footer>',
338 |       '</div>'
339 |     ].join(''))
340 |   })
341 | })
342 | 


--------------------------------------------------------------------------------