Ice Cream

Appearance

Getting Started ​

NOTE

Documentation will change when Ice Cream is released on npm.

TIP

Do not use $ while running any commands provided in this documentation.

Getting Started with Ice Cream is a simple task.

Try It Online! ​

Try it online over on Replit by forking the project and editing the code!

Installation ​

NOTE

To install Ice Cream you need git installed on your system.

To install Ice Cream enter your command line and run the following command;

sh
$ git clone https://github.com/ice-cream-js/icecream-cli

Setup Wizard ​

Ice Cream ships with a command line setup wizard that will help you scaffold a basic project. After installation, start the wizard by running:

sh
$ icecream make

Once you enter Ice Cream's make command in your command-line it will automatically prompt the user with the following questions:

|
|_? Project name: (» icecream-app) 
|_? Select a variant: (Use arrow keys)
  |__ JavaScript
  |__ TypeScript

NOTE

Your project's root directory will be named after your project name.

File Structure ​

After answering the prompts generated by the command line setup wizard, your project will have been generated by the command line setup wizard.

Assuming you named your project as icecream-app your file structure will be generated as the following:

.
├─ icecream-app
│  ├─ lib
│  │  └─ ice-cream.js
│  ├─ LICENSE
│  ├─ .editorconfig
│  ├─ app.js
│  └─ index.html
.
├─ icecream-app
│  ├─ lib
│  │  └─ ice-cream.ts
│  ├─ LICENSE
│  ├─ .editorconfig
│  ├─ app.ts
│  └─ index.html

TIP

Your index.html and app.js/app.ts files will be filled with example code. This code is not to be used for production deployments!

Source Files ​

Any files inside of the ./lib directory are considered source files.

There is only one source file named ice-cream.js or ice-cream.ts depending on what variant you used to generate your project files.

The inside of the file is;

js
export default function render(appContainer,html,styles) {
  const renderContainer = document.getElementById(appContainer)
  const CSS = `
  <style>
  ${styles}
  </style>
  `
  renderContainer.innerHTML = html + CSS;
}
ts
export default function render(appContainer: string,html: string,styles: string) {
    const renderContainer: any = document.getElementById(appContainer)
    const CSS = `
    <style>
    ${styles}
    </style>
    `
    renderContainer.innerHTML = html + CSS;
  }

This code can be edited to your liking but I do not recommend editing the
./lib/ice-cream.js/./lib/ice-cream.ts file because it might make it where the documentation does not work.

IMPORTANT

The documentation is written specifically for the official, unedited edition of the ./lib/ice-cream.js/./lib/ice-cream.ts file. Please keep this in mind if you're going to edit the library's source file.

What's Next? ​

You've just learnt how to get started with Ice Cream and create a new project! Next up you'll check out the rest of the documentation.

Documentation

Table of Contents ​

What is Ice Cream JS?
👁️ Getting Started
Examples
Rendering