Live coding in your browser with your favourite language.

Overview

Fil

Live coding in your browser with your favourite language.

https://fatiherikli.github.io/fil/

fil

Features

  • Currently supports Python, Ruby, Javascript, Brainfuck and happycalculator.
  • Runs on web workers.
  • Uses localStorage API for your changes.

Implementation

  • Uses Skulpt for Python interpreter.
  • Uses Opal for Ruby interpreter.
  • Built with React and Redux.

Todo

  • Languages
    • LiveScript
    • SibilantJS or LispyScript
    • Elm-lang
    • Any language you want
  • Build electron package.

Development

Clone the repository and run the following commands.

$ npm install
$ bower install
$ gulp build

After the installation, you can open index.html in your browser. Also you can run gulp watch command to listen and compile your changes.

Adding a new interpreter

Fil speaks with web workers to interpret the source codes. The workers listen message event for source code, and stream with stringified JSON object for the output of program.

The message should be a plain text, like this:

puts "hey".upcase

After the receiving, the worker will stream stringified json objects with type and data keys.

JSON.stringify({
    type: "stdout",
    data: "HEY"
})

The key of the object may be:

key description
stdout To print to the console
stderr To show warning message
exit To finish program

Lets create our worker.

// workers/markdown.js 
let sendMessage = (name, message) => {
  self.postMessage(JSON.stringify({
    type: name,
    data: message
  }));
}

let run = source => {
  var parser = new Markdown(),
      output;
  try {
    output = parser.parse(source)
    sendMessage('stdout', output);
  } catch (e) {
    sendMessage('stderr', {
      exception: 'ParseError',
      description: String(e)
    });
  }
  sendMessage('exit');
}

self.addEventListener('message', (e) => run(e.data));

After then, we should define this worker in /interpreters.yaml.

...
markdown:
  description: "Markdown"
  extension: "md"
  workerPath: "build/markdown.worker.js"
  editorMode: "markdown"
  includes:
  	- '{bowerPath}markdown-parser/src/markdow.min.js'

The configuration object may contains the following values:

key description
description Name of your interpreter that will shown on the console.
extension File extensions will associated with the interpreter.
workerPath Worker file. This file will be generated with gulp buildWorkers command.
editorMode The mode of ACE Editor.
includes The scripts will be concatenated with your worker.
parsingErrors To keep apart the syntax errors and internal errors of interpreter.

Now we can build our new interpreter.

$ gulp buildWorkers

Using gulpfile ~/projects/fil/gulpfile.js
Starting 'buildWorkers'...
Finished 'buildWorkers' after 29 ms

That's it.

You might also like...
This is the github browser with react js. i am using axious and github api in this project

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Zkp-merkle-airdrop-fe-ex - Example of computing proofs for the zkp-merkle-airdrop-contracts sample repo in the browser
Zkp-merkle-airdrop-fe-ex - Example of computing proofs for the zkp-merkle-airdrop-contracts sample repo in the browser

React + NextJS + Webpacking Example of computing proofs for the zkp-merkle-airdr

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers
The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers

The Plasmo Framework is a battery-packed browser extension SDK made by hackers for hackers. Build your product and stop worrying about config files and the odd peculiarities of building browser extensions.

Authentication library for the browser environment using Web Crypto API

Authentication Library for the Web A collection of utility functions for working with Web Crypto API.

Use js to download and unzip the npm package. only supports use in the browser.

Use js to download and unzip the npm package. only supports use in the browser.

A React Library to update API url with query parameters by looking at query parameters in the browser.
A React Library to update API url with query parameters by looking at query parameters in the browser.

A React Library to update API url with query parameters by looking at query parameters in the browser.

LocateJS predicts your location by analyzing your connection and system data.

LocateJS predicts your location by analyzing your connection and system data.

A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css

custom-react-cursor A React Custom able cursor that can decorate your site also your hand is open to manipulate the cursor with css Demo live Installi

Showcase your skills on your Github readme or resumé with ease ✨
Showcase your skills on your Github readme or resumé with ease ✨

Showcase your skills on your GitHub or resumé with ease! Powered by Cloudflare Workers ⚡ Docs Example Specifying Icons Themed Icons Icons Per Line Cen

Releases(Fil)
  • Fil(Jan 9, 2021)

    🐘 There's no release not but lets read some wiki

    Elephants are scattered throughout sub-Saharan Africa, South Asia, and Southeast Asia and are found in different habitats, including savannahs, forests, deserts, and marshes. They are herbivorous, and they stay near water when it is accessible. They are considered to be keystone species, due to their impact on their environments. Elephants have a fission–fusion society, in which multiple family groups come together to socialise. Females (cows) tend to live in family groups, which can consist of one female with her calves or several related females with offspring. The groups, which do not include bulls, are led by the (usually) oldest cow, known as the matriarch.

    https://en.wikipedia.org/wiki/Elephant

    Source code(tar.gz)
    Source code(zip)
Owner
Fatih Erikli
Istanbul University Faculty of Medicine. I don't want to split myself into two pieces. I can't take a sick leave. What don't you understand exactly?
Fatih Erikli
Clone Coding Repository for "React WebGame" Course of ZeroCho

Clone Coding Repository for "React WebGame" Course of ZeroCho

Hyecheol (Jerry) Jang 1 Dec 4, 2021
React coding challenge : programm the itemSlider component

react-coding-challenge Congratulations Congratulations, you will receive our Coding Challenge today! Everything you need (besides React) can be found

Usama 0 Nov 15, 2021
whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

whatscode.js is a package to create Whatsapp bots easily and quickly, even coding experience is not really needed...

JstnLT 21 Dec 30, 2022
Github Language Statistics

GitHub Language Statistics Data Generation Languages Get language top list for Github SELECT language.name, COUNT(language.name) AS count FROM [bigque

Fabian Beuke 734 Dec 29, 2022
NativeWind uses Tailwind CSS as high-level scripting language to create a universal design system

NativeWind Note tailwindcss-react-native is current working on v2, which includes a renaming of the project to NativeWind! NativeWind is still under d

Mark Lawlor 1.6k Jan 7, 2023
A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox.

Sandpack Sandpack is a component toolkit for creating your own live running code editing experience powered by CodeSandbox. Learn more about Sandpack

CodeSandbox 2.9k Dec 27, 2022
An app designed to connect customers with translators in realtime, with translations provided through image, chat and live video calls.

Transl8r About the Project Transl8r is an app designed to connect people and translators to provide fast, effective translations via live chat, video

Richard Barnes 8 Oct 27, 2022
Cross-chain community-driven trading experience in your chrome browser

Crosschain ethereum wallet and trading platform made by the people, for the people.

Xfolio 1 Dec 1, 2021
Foxpage SDK for JavaScript in the browser and Node.js.

Foxpage SDK for JavaScript in the browser and Node.js.

Trip.com Tech 6 Nov 21, 2021
In-browser lightmap/AO baker for react-three-fiber and ThreeJS

react-three-lightmap In-browser lightmap and ambient occlusion (AO map) baker for react-three-fiber and ThreeJS. Live editable sandbox. Local Developm

Poimandres 99 Dec 27, 2022