manipulative/server.js

React devtool for modifying Emotion styles in browser

#!/usr/bin/env node
'use strict';

var commander = require('commander');
var bodyParser = require('body-parser');
var cors = require('cors');
var express = require('express');
var fs = require('fs');
var prettier = require('prettier');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var bodyParser__default = /*#__PURE__*/_interopDefaultLegacy(bodyParser);
var cors__default = /*#__PURE__*/_interopDefaultLegacy(cors);
var express__default = /*#__PURE__*/_interopDefaultLegacy(express);
var prettier__default = /*#__PURE__*/_interopDefaultLegacy(prettier);

/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */

function __awaiter(thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
}

const PROP_PLACEHOLDER = "css__";

function readFile(fileName) {
  return new Promise((resolve, reject) => {
    fs.readFile(fileName, {
      encoding: "utf8"
    }, (err, contents) => {
      if (err !== null) {
        reject(err);
        return;
      }

      resolve(contents);
    });
  });
}

function replacePlaceholder(contents, position, propValue, cssValue) {
  const isCssPlaceholderProp = contents.substring(position, position + PROP_PLACEHOLDER.length) === PROP_PLACEHOLDER;

  if (isCssPlaceholderProp) {
    return `${contents.substring(0, position)}${propValue}${contents.substring(position + PROP_PLACEHOLDER.length)}`;
  }

  const nextCloseParen = contents.indexOf(")", position);
  return `${contents.substring(0, position)}${cssValue}${contents.substring(nextCloseParen + 1)}`;
}

function processFile(fileName, updates, options) {
  return __awaiter(this, void 0, void 0, function* () {
    const contents = yield readFile(fileName);
    let newContents = contents;
    let didAddCssCall = false; // Good ol' text manipulation here. We can process the AST using Babel but
    // it'll be harder to preserve formatting.

    updates.slice() // process updates from back to front
    .sort(([aPos], [bPos]) => bPos - aPos).forEach(([position, value]) => {
      if (value.trim() === "") {
        newContents = replacePlaceholder(newContents, position, "", "undefined");
        return;
      }

      newContents = replacePlaceholder(newContents, position, `css={css\`${value}\`}`, `css\`${value}\``);
      didAddCssCall = true;
    });

    if (didAddCssCall) {
      if (newContents.indexOf("@emotion/react") === -1) {
        newContents = `import {css} from '@emotion/react';\n${newContents}`;
      }
    }

    const formatted = options.prettier ? prettier__default['default'].format(newContents, {
      filepath: fileName
    }) : newContents;
    yield new Promise((resolve, reject) => fs.writeFile(fileName, formatted, err => {
      if (err !== null) {
        reject(err);
        return;
      }

      resolve();
    }));
  });
}

function main() {
  commander.program.option("-p, --port <port>", "server port", p => parseInt(p), 3199);
  commander.program.option("--no-prettier", "whether to format modified files with prettier");
  commander.program.parse(process.argv);
  const options = {
    prettier: commander.program.prettier
  };
  const app = express__default['default']();
  app.use(bodyParser__default['default'].json());
  app.use(cors__default['default']());
  app.get("/ping", (_, res) => {
    res.send("pong");
  });
  app.post("/commit", (req, res) => __awaiter(this, void 0, void 0, function* () {
    const updates = req.body.updates;
    const updatesByFile = {};
    updates.forEach(({
      fileName,
      position,
      value
    }) => {
      if (updatesByFile[fileName] === undefined) {
        updatesByFile[fileName] = [];
      }

      updatesByFile[fileName].push([position, value]);
    });

    try {
      yield Promise.all(Object.keys(updatesByFile).map(fileName => {
        try {
          processFile(fileName, updatesByFile[fileName], options);
          console.log(`modified file ${fileName}`);
        } catch (err) {
          console.log(`error updating file ${fileName}`, err);
        }
      }));
      res.sendStatus(200);
    } catch (_a) {
      res.sendStatus(400);
    }
  }));
  app.listen(commander.program.port);
  console.log(`manipulative server listening on port ${commander.program.port}`);
  console.log(`options: ${JSON.stringify(options)}`);
}

main();