David Calhoun dcalhoun

https://twitter.com/snookca/status/1073299331262889984?s=21

‪“‬In what way is JS any more maintainable than CSS? How does writing CSS in JS make it any more maintainable?”

‪Happy to chat about this. There’s an obvious disclaimer that there’s a cost to css-in-js solutions, but that cost is paid specifically for the benefits it brings; as such it’s useful for some usecases, and not meant as a replacement for all workflows. ‬

‪(These conversations always get heated on twitter, so please believe that I’m here to converse, not to convince. In return, I promise to listen to you too and change my opinions; I’ve had mad respect for you for years and would consider your feedback a gift. Also, some of the stuff I’m writing might seem obvious to you; I’m not trying to tell you if all people of some of the details, but it might be useful to someone else who bumps into this who doesn’t have context)‬

So the big deal about css-in-js (cij) is selectors.

The Rules of React

All libraries have subtle rules that you have to follow for them to work well. Often these are implied and undocumented rules that you have to learn as you go. This is an attempt to document the rules of React renders. Ideally a type system could enforce it.

What Functions Are "Pure"?

A number of methods in React are assumed to be "pure".

On classes that's the constructor, getDerivedStateFromProps, shouldComponentUpdate and render.

Importing Objective-C into Swift

To import a set of Objective-C files in the same framework target as your Swift code, you’ll need to import those files into the Objective-C umbrella header for the framework.

Under Build Settings, in Packaging, make sure the Defines Module setting for that framework target is set to “Yes”.
In your umbrella header file (FrameworkName.h), import every Objective-C header you want to expose to Swift. For example:

#import <XYZ/XYZCustomCell.h>
#import <XYZ/XYZCustomView.h>
#import <XYZ/XYZCustomViewController.h>

[8:27 PM] cquill: @acemarke Right, so many portions of the UI will be connected. But does each connected portion typically get its own container component? Seems verbose and redundant to have the following for each CRUD resource: UserList, UserListContainer, UserView, UserViewContainer, UserEdit, UserEditContainer, UserNew, UserNewContainer. Is there a simpler way?
[9:56 PM] acemarke: @cquill : this leads into one of my favorite (?) semi-rants, and one that I apparently need to write down so I can paste it
[9:57 PM] acemarke: A "container" component is simply any component whose primary job is to fetch data from somewhere, and pass that data on to its children
[9:58 PM] acemarke: With Redux, the wrapper components generated by connect are "container" components, since their job is to extract data from the Redux store
[9:58 PM] acemarke: I generally dislike the somewhat-common approach of trying to divide everything into a "components" folder and a "containers" folder
[9:59 P

	import { createHash } from 'crypto'
	import { defineConfig } from 'vite'
	import react from '@vitejs/plugin-react'
	import {
	defaultRequestToExternal,
	defaultRequestToHandle
	} from '@wordpress/dependency-extraction-webpack-plugin/lib/util.js'
	import json2php from 'json2php'

	import packageMeta from './package.json';

	// bindings can be isolated/upstreamed. I'm inlining it just for the example
	type request;
	type response;
	[@bs.new] external makeXMLHttpRequest: unit => request = "XMLHttpRequest";
	[@bs.send] external addEventListener: (request, string, unit => unit) => unit = "addEventListener";
	[@bs.get] external response: request => response = "response";
	[@bs.send] external open_: (request, string, string) => unit = "open";
	[@bs.send] external send: request => unit = "send";
	[@bs.send] external abort: request => unit = "abort";
	// =========

	// This file is from an actual react app that would install the library outlined in the rest of these files
	import React from 'react'
	import { SafeAreaView, StyleSheet, View } from 'react-native'
	import RichTextEditor from 'react-native-rich-text-editor'

	const styles = StyleSheet.create({
	body: {
	flex: 1,
	},
	inputContainer: {

	// This is a proper alternative to
	// https://github.com/BuckleScript/bucklescript/blob/b9508105b1a35537bdea9a1fabd10f6c65f776b4/jscomp/bsb/templates/react-hooks/src/FetchedDogPictures/FetchedDogPictures.re#L14
	// The one in that file uses Promise, but that's wrong.
	// We only used promise as a demo of its API. We'll remove it soon.

	// As you can see below, the pure XMLHttpRequest code is just as clean,
	// less mysterious for all, more performant, extensible, and actually correct.

	// Ignore these externals for now. They're just for illustration
	// purposes. I just copy pasted the Js code from

	import NextLink from 'next/link';
	import React from 'react';
	import { Text } from 'react-native-web';

	// https://github.com/zeit/next.js#with-link
	// Combines the Next.js <Link> with React Native's <Text> component.
	// Enables use like this:
	//
	// <Link
	// href={href}

	/**
	* - check symlink in depencency and devDepency
	* - if found, generate rn-cli-config.js
	* - react-native start with rn-cli-config
	*/

	const packageJson = require('./package.json');
	const fs = require('fs');
	const exec = require('child_process').execSync;
	const RN_CLI_CONFIG_NAME = `rn-cli-config-with-links.js`;