1.2.1 • Published 2 years ago
@tjmora/template-literal-object v1.2.1
@tjmora/template-literal-object
An object that can represent a template string literal, including all its string parts and all the interpolations.
Installation
npm i @tjmora/template-literal-object
Usage
import TLO from "@tjmora/template-literal-object"; // for Typescript
// const TLO = require("@tjmora/template-literal-object").default; // for Javascript
// Let's define a tag function for demo
function test(stringParts: TemplateStringsArray, ...interpolations: any[]) {
console.log(stringParts);
console.log(interpolations);
}
let obj1 = TLO.set`
Hello
${"World" + " and"}
Asia
${100 + 1}
`;
let obj2 = TLO.set`
Hello
${"World" + " and"}
the Philippines
${100 + 2}
`;
obj1.append(obj2); // appends obj2 to obj1
test(...obj1.parts());
// This logs the following:
// [
// '\n Hello\n ',
// '\n Asia\n ',
// '\n\n Hello\n ',
// '\n the Philippines\n ',
// '\n'
//]
//[ 'World and', 101, 'World and', 102 ]
USAGE in CSS-in-JS libraries (e.g., styled-components)
Use the styled
method instead of the set
method. The styled
method has a more
limited set of allowed types for interpolations.
NOTE: There's also a syntax highlighter and IntelliSense for TLO.styled. One more reason to use the
styled
method instead of theset
method when dealing with CSS-in-JS.
import TLO from "@tjmora/template-literal-object"; // for Typescript
// const TLO = require("@tjmora/template-literal-object").default; // for Javascript
import styled from "styled-components";
const DefaultStyle = TLO.styled`
display: block;
width: 100%;
background-color: ${props => props.theme.card.color.background};
`;
const SomeStyleFromSomewhereElse = TLO.styled`
display: inline-block;
color: ${props => props.theme.card.color.textPrimary};
`;
DefaultStyle.append(SomeStyleFromSomewhereElse);
const SomeComponent = styled.div(...DefaultStyle.parts());
1.2.1
2 years ago
1.2.0
2 years ago
1.1.12
2 years ago
1.1.11
2 years ago
1.1.10
2 years ago
1.1.9
2 years ago
1.1.8
2 years ago
1.1.7
2 years ago
1.1.6
2 years ago
1.1.5
2 years ago
1.1.4
2 years ago
1.1.3
2 years ago
1.1.2
2 years ago
1.1.1
2 years ago
1.1.0
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago