Typescript Overview – Phenix Design System

Phenix Query

Learn how to work around Phenix Query JS/TypeScript source code to build fancy and interactive components.

What is Phenix Query

Phenix Query is JavaScript Objects Query Creator with Prototypes functionality that lets you traverse and manipulate, event handling HTML Elements and create interactive components like slideshow, tabbing panels, etc. kind of like jQuery but with Typescript and Plain JS . (ES-Next)
Phenix is an Elements Selector you can use to select HTML elements with CSS Selectors or JS Object and play with it, and it will always return itself which is an object of HTML Elements. (array)
Phenix has its collection of plugins and modules to create an amazing user interface, it almost has everything you will ever need to build a creative web app.
Phenix JavaScript can be used individually without the CSS/SASS files as a completely self-independent JavaScript Library.
Phenix JavaScript can be merged and work side by side with any other JavaScript framework like vue, react, angular, etc.

Typescript Modules

you can import and use the TypeScript modules into your project typescript by import Phenix from ‘./node_modules/phenix-ts’ which will import Phenix plugins for you to use it in your project,

or you can use it as a JavaScript module by import Phenix from “./node_modules/phenix-js”

inside your script file or even with HTML script in the example below, for more information about how to use P.D.S TypeScript/JavaScript click here

<script type="module">
    import Phenix from  "./node_modules/phenix-js" || "CDN URL";
</script>

Build TypeScript

phenix uses webpack to compile the typescript files to valid JavaScript files and you can run the build script by command linenpm run phenix-ts and it will watch any changes you make to the typescripts files and compile it instantly to js files,

💼-your-project[phenix]
    📂-src
        📁-...
        📁-scripts
    📂-dist
        📁-...
        📁-js

Custom Scripts

in the typescript directory phenix/src/typescript you will find a custom-scripts.ts file for your design script you can use and extend the phenix query object and its modules there.

💼-your-project[phenix]
    📂-src/scripts
        📄index.ts || Phenix Query
        📄custom-scripts.ts⠀|| Custom Script
        📁-components
        📁-features
        📁-integration