Corel (kəˈrɑːl) ================== Corel is a typescript library used for developing [my personal portfolio application][] (named as 'GET IT JOB') in a modular way.
Corel is a typescript library used for developing my personal portfolio application (named as 'GET IT JOB') in a modular way.
As stated above, this library is part of a personal project. This package library is limited to the study level. You'd better find more refined one like scaleApp for your own project
This library was basically written to illustrate how I wrote a scalable multi pages frontend app for my portfolio project.
Despite the drawbacks of the library, I decided to package it with the following intent:
Packaging itself will help to modularize my portfolio project
Trying to explain how to use will make it easier to spot the absurdity of library
One of main themes in my project is continuous integration and delivery, and packaging and sharing are very useful for their implementation.
This library has the following limitations:
Containing only as much code as needed in my personal portolio project
Not sufficiently refactored, I'm pretty sure it will contain unnecessary and less beautiful code.
With a high probability, no further improvement of library is expected to happen once project completed (since it would be better to write whole new code than to improve)
Basic directory structure in my project is as follows:
.
├── main.ts
└── app
├── index.ts
└── modules
└── selector.ts
Step 1
Install package via npm or yarn.
$ npm install corel
Step 2
Write a javascript object (eg selector_box) corresponding to html code chunks 'as a module unit' according to the signature of the module-type.
/* selector.ts */
import { DepType, LoaderType, SandboxType } from 'corel';
export const selector_box: ModuleType = {
name: 'selector' ,
type:DepType.MODULE,
loader: (sandbox: SandboxType)=> new (class _ implements LoaderType {
dock: () => { };
update: () => { };
load: () => { };
unload: () => { };
})()
};
Step 3
Write an option to be injected into the application. (modules written above is to be included in the array named 'mods').
/* app/index.ts */
import { selector_box } from './modules';
export const option: Option = {
ShoppingCart: {
"SHP": {
libs: [ts_log, jquery_dom],
mods: [selector_box, selected_box, tablebook_box]
}
}
};
Step 4
Inject the above option and the title of the html document in the outermost client code.
/* main.ts */
import { Corel } from './lib';
import { option } from './app';
window.onload = () => {
const page = document.getElementsByTagName('title')[0].text;
Corel.set(option)
.create(page)
.start_all();
};
Step 5
Write the html document to import bundle.js that we will create as shown below in Step 6. The html document should have a title tag with a value 'ShoppingCart' later to be fetched by your application at the time of document loading.
/* index.html */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ShoppingCart</title>
</head>
<body>
</body>
<script src="bundle.js"></script>
</html>
Step 6
Transpile code with tsc or any bundler which supports typescript compilation and name it as bundle.js.
/* tsconfig.json */
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"lib": [
"DOM",
"ES5"
],
"outDir": "./dist",
"types": [
"node",
"jQuery"
],
},
"include": [
"./index.ts"
]
}
Next, bundle the converted JavaScript files in the dist folder with browserify to suit your browser environment.(use npx if you don't have browserify installed in your global scope).
$ npx browserify dist/main.js -o bundle.js
The library architecture is mainly inspired by:
Nicholas Zakas:
scaleApp (a lightweight Javascript framework written in coffee script)
FAQs
Corel (kəˈrɑːl) ================== Corel is a typescript library used for developing [my personal portfolio application][] (named as 'GET IT JOB') in a modular way.
We found that corel demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket Firewall Enterprise is now available with flexible deployment, configurable policies, and expanded language support.
Security News
Open source dashboard CNAPulse tracks CVE Numbering Authorities’ publishing activity, highlighting trends and transparency across the CVE ecosystem.
Product
Detect malware, unsafe data flows, and license issues in GitHub Actions with Socket’s new workflow scanning support.