put unstyled lines in obj

Author: timhaywood

README.md

@@ -9,125 +9,40 @@
 
 Learn more about writing `.jsx` files for After Effects here: https://motiondeveloper.com/blog/write-expressions-external-files/
 
-## Development
-
-1. **Clone project locally**
-
-   ```sh
-   git clone repoUrl.git
-   cd style-parser
-   ```
-
-2. **Start Rollup**
-
-   Start Rollup in watch mode to automatically refresh your code as you make changes, by running:
-
-   ```sh
-   npm run watch
-   ```
-
-   _You can run also run a once off build:_ `npm run build`
-
-3. **Edit the `src` files**
-
-   _The `index.ts` contains an example expression setup._
-
-   Any values exported from this file will be included in your library, for example:
-
-   ```js
-   export { someValue };
-   ```
-
-4. **Import the `dist` file into After Effects**
-
-   Use the compiled output file as you would any other `.jsx` library. Any changes to the `src` files will be live updated, and After Effects will update the result of your expression.
-
-5. **Distribute releases**
-
-   To distribute your output file using Github releases (via [Hub](https://github.com/github/hub)), use the command:
-
-   ```sh
-   npm run release
-   ```
-
-   This will use the GitHub CLI to create a new tag and release
-
-   The release version number is the `"version"` in `package.json`, and it will attach the `"main"` file to the release.
-
-   > You can add this version to the output file by placing the string `_npmVersion` in your code, which will be replaced with the version number in `package.json` at build time.
-
-## After Effects API
-
-> This template uses the [`expression-globals-typescript`](https://github.com/motiondeveloper/expression-globals-typescript) package to provide types for the expressions API.
-
-### Classes
-
-To create layers, compositions and properties, you can use the classes exported from the library. For example:
-
 ```ts
-import { Comp, Layer } from 'expression-globals-typescript';
-const thisComp = new Comp();
-const thisLayer = new Layer();
-```
-
-To create properties (such as position or scale), you can use the `Property` class.
+type Line = Array<{ content: string; style: string }>;
 
-```ts
-import { Property, Vector } from 'expression-globals-typescript';
-const thisProperty = new Property<Vector>([0, 100]);
+type parseStyles = (
+  textString: string,
+  parsers?: Array<{ matcher: RegExp; stylename: string }>
+) => Line[];
 ```
 
-> The `Property` constructor takes a value to set as the property value, and a type (`<>`) to set as the type for the property.
-
-### After Effects Types
-
-You can import After Effect's specific types such as `Color` and `Vector` from the package to properly type your expressions.
+## Example
 
-#### _To see all the Types and Base Objects available, see the [`expression-globals-typescript`](https://github.com/motiondeveloper/expression-globals-typescript) source code._
+Expression:
 
-## Testing
+```js
+const { parseStyles } = footage('style-parser.jsx').sourceData;
+const textString = `This will
+*be bold* and
+this will _be italics_`;
 
-You can test your expression library code using [Jest](https://jestjs.io/), which comes pre-configured in this template repo.
-
-You write tests in the `index.test.ts` file, importing the code you want to test from `index.ts`, for example:
-
-```ts
-import { welcome } from './index';
-
-test('returns correct welcome string', () => {
-  expect(welcome('test')).toEqual('Welcome test!');
-});
+const parsed = parseStyles(textString);
 ```
 
-And then run the test suite:
-
-```sh
-npm run test
+Results in:
+
+```js
+[
+  [{ content: 'This will', style: 'regular' }],
+  [
+    { content: 'be bold', style: 'bold' },
+    { content: 'and', style: 'regular' },
+  ],
+  [
+    { content: 'this will', style: 'regular' },
+    { content: 'be italics', style: 'italics' },
+  ],
+];
 ```
-
-Which will run Jest in watch mode.
-
-> You can learn more about testing using Jest from the [Jest docs](https://jestjs.io/docs/en/getting-started).
-
-## Configuration
-
-There a couple of files you may wish to change to reflect the content of your project:
-
-- `package.json`:
-  - `version`: The current version of the library, which is used for releases and added to `dist` files.
-  - `main`: The build output file which will be attached to releases
-- `rollup.config.js`:
-  - `input`: The source file to be built
-  - `typescript()`: Custom typescript compiler options
-
-## How
-
-- [expression-globals-typescript](https://github.com/motiondeveloper/expression-globals-typescript) mocks the After Effects expressions API in typescript, so you can use global functions and objects such as `linear()` and `time`, while also providing expression specific types such as `Layer`.
-
-- [Rollup](https://rollupjs.org/) is a lightweight module bundler that handles outputting the `.jsx` file via the plugins below.
-
-- The Rollup [Typescript plugin](https://www.npmjs.com/package/@rollup/plugin-typescript) runs the TypeScript compiler
-
-- The Rollup plugin [rollup-plugin-ae-jsx](https://www.npmjs.com/package/rollup-plugin-ae-jsx) transforms the JavaScript output into After Effects JSON (`.jsx`) compliant syntax
-
-- Testing via [Jest](https://jestjs.io/), and [ts-jest](https://github.com/kulshekhar/ts-jest)

src/index.ts

@@ -3,7 +3,10 @@ type ParsedSection = {
   style: string;
 };
 
-function parseStyles(inputText: string) {
+function parseStyles(
+  inputText: string,
+  customParsers: Array<{ matcher: RegExp; stylename: string }>
+) {
   /** Split the input text into an array of lines */
   const inputLines = inputText.split(/[\r\n\3]/g);
 
@@ -38,16 +41,21 @@ function parseStyles(inputText: string) {
     };
   }
 
-  /** Matches *content* */
-  const BOLD_REGEX = new RegExp(/\*(.*)\*/);
-  const parseBold = createLineParser(BOLD_REGEX, 'bold');
+  const parsers = customParsers ?? [
+    { stylename: 'bold', matcher: new RegExp(/\*(.*)\*/) },
+    { stylename: 'italics', matcher: new RegExp(/_(.*)_/) },
+  ];
 
-  /** Matches _content_ */
-  const ITALICS_REGEX = new RegExp(/_(.*)_/);
-  const parseItalics = createLineParser(ITALICS_REGEX, 'italics');
+  // Parse all the styles
+  let styles: (string | ParsedSection | ParsedSection[])[] = inputLines;
+  for (const { matcher, stylename } of parsers) {
+    const parser = createLineParser(matcher, stylename);
+    styles = styles.map(parser);
+  }
 
-  const textStylesByLine = inputLines.map(parseBold).map(parseItalics);
-  return textStylesByLine;
+  return styles.map((line) =>
+    typeof line === 'string' ? { content: line, style: 'regular' } : line
+  );
 }
 
 // '_npmVersion' is replaced with value from package.json