stolinski

function ProviderComposer({ contexts, children }) {
  return contexts.reduceRight(
    (kids, parent) =>
      React.cloneElement(parent, {
        children: kids,
      }),
    children
  );
}

Rich-Harris

I've been deceiving you all. I had you believe that Svelte was a UI framework — unlike React and Vue etc, because it shifts work out of the client and into the compiler, but a framework nonetheless.

But that's not exactly accurate. In my defense, I didn't realise it myself until very recently. But with Svelte 3 around the corner, it's time to come clean about what Svelte really is.

Svelte is a language.

Specifically, Svelte is an attempt to answer a question that many people have asked, and a few have answered: what would it look like if we had a language for describing reactive user interfaces?

A few projects that have answered this question:

antmdvs

{
  "useState()": {
    "prefix": "us",
    "scope": "javascript,javascriptreact,typescript,typescriptreact",
    "body": [
      "const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2);",
      "$0"
    ],
    "description": "React: useState()"
  },

rojcyk

import React from 'react'
import RehypeReact from 'rehype-react'

/* Importing styled or react components */

import {
  Headline1,
} from './content'

/* Mapping the components to the markdown output */

noelbundick

MIT License

Copyright (c) 2018 Noel Bundick

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:

rauschma

Strings

String.prototype.*

None of the string methods modify this – they always return fresh strings.

• charAt(pos: number): string ^ES1

  Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

ryanditjia

import React from 'react'
import { string, node, func, shape } from 'prop-types'

import { scrollToHref } from './helpers'

const handleClick = ({ href, callback, history, event }) => {
  /* prevent normal link behavior */
  event.preventDefault()

  /* call the function */

rauschma

This content moved here: https://exploringjs.com/impatient-js/ch_arrays.html#quickref-arrays

spences10

export const slugIt = text => {
  if (!text) return
  return text
    .toString()
    .toLowerCase()
    .replace(/\s+/g, '-') // Replace spaces with -
    .replace(/[^\w\-]+/g, '') // Remove all non-word chars
    .replace(/\-\-+/g, '-') // Replace multiple - with single -
    .replace(/^-+/, '') // Trim - from start of text
    .replace(/-+$/, '') // Trim - from end of text

threepointone

A series of posts on css-in-js

0. styles as objects

First, an exercise. Can we represent all of css with plain data? Let's try.

let redText = { color: 'red' };