From 1b8809644a7633cc07995ff21a4237d2a0eeb7be Mon Sep 17 00:00:00 2001 From: Maria Hutt Date: Wed, 4 Nov 2026 20:35:32 -0800 Subject: [PATCH] chore: clean up dependencies, spell check caching, and leftover markup --- .gitignore | 1 + docs/components.mdx | 2 - docs/index.mdx | 2 - docs/native-setup.mdx | 1 - docs/native.mdx | 2 - docs/reference/glossary.mdx | 88 +++++++++---------- package-lock.json | 1 - package.json | 9 +- scripts/release-notes.mjs | 11 ++- versioned_docs/version-v8/components.mdx | 2 - versioned_docs/version-v8/index.mdx | 2 - versioned_docs/version-v8/native-setup.mdx | 1 - versioned_docs/version-v8/native.mdx | 2 - .../version-v8/reference/glossary.mdx | 88 +++++++++---------- 14 files changed, 99 insertions(+), 113 deletions(-) diff --git a/.gitignore b/.gitignore index a1ae05b6ea1..2389a71d98a 100644 --- a/.gitignore +++ b/.gitignore @@ -7,6 +7,7 @@ # Generated files .docusaurus .cache-loader +.cspellcache src/components/page/reference/ReleaseNotes/release-notes.json # Misc diff --git a/docs/components.mdx b/docs/components.mdx index 01d153f89f1..34bfd4257c5 100644 --- a/docs/components.mdx +++ b/docs/components.mdx @@ -21,8 +21,6 @@ import DocsCards from '@components/global/DocsCards'; Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component. - -

Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.

diff --git a/docs/index.mdx b/docs/index.mdx index 72bfec09419..7badca462d4 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -26,8 +26,6 @@ Ionic is an open source UI toolkit for building performant, high-quality mobile Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts. - -

Step-by-step guides to setting up your system and installing the framework.

diff --git a/docs/native-setup.mdx b/docs/native-setup.mdx index e4889b192fb..367f27a069a 100644 --- a/docs/native-setup.mdx +++ b/docs/native-setup.mdx @@ -22,7 +22,6 @@ import TabItem from '@theme/TabItem'; Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project. - ## Install {/* #install */} diff --git a/docs/native.mdx b/docs/native.mdx index 13818c296ad..bee4dcc9758 100644 --- a/docs/native.mdx +++ b/docs/native.mdx @@ -21,8 +21,6 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard'; `} - - Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences. While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk). diff --git a/docs/reference/glossary.mdx b/docs/reference/glossary.mdx index 2ba1a47f0e2..2c226fe86da 100644 --- a/docs/reference/glossary.mdx +++ b/docs/reference/glossary.mdx @@ -10,178 +10,174 @@ title: Glossary /> -
- -### Accessibility {/* #a11y */} +## Accessibility {/* #a11y */} [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. -### Android SDK {/* #android-sdk */} +## Android SDK {/* #android-sdk */} The [Android SDK](http://developer.android.com/sdk/index.html) is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. -### Android Studio {/* #android-studio */} +## Android Studio {/* #android-studio */} [Android Studio](https://developer.android.com/studio/) is the official Integrated Development Environment (IDE) for Native Android app development. -### Autoprefixer {/* #autoprefixer */} +## Autoprefixer {/* #autoprefixer */} [Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules you write will be applied across all supporting browsers. For example, instead of having to know every flexbox syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll automatically plug in the correct CSS. -### Babel {/* #babel */} +## Babel {/* #babel */} [Babel](https://babeljs.io) is a [transpiler](#transpiler) that converts modern JavaScript into a backwards-compatible version, so that syntax such as [ES2015/ES6](#es2015-es6) runs in browsers that only support [ES5](#es5). It is commonly paired with a build tool so the conversion happens automatically as part of [bundling](#bundling). -### Bundling {/* #bundling */} +## Bundling {/* #bundling */} Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and compiling/transpiling them down to one single file. -### Capacitor {/* #capacitor */} +## Capacitor {/* #capacitor */} [Capacitor](https://capacitorjs.com/) is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the company. {/* cspell:disable */} -### CLI {/* #cli */} +## CLI {/* #cli */} A CLI, or **C**ommand-**L**ine **I**nterface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to [Ionic's CLI](https://ionicframework.com/docs/cli). Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing [Ionic commercial services](https://ionic.io/appflow). {/* cspell:enable */} -### CommonJS {/* #commonjs */} +## CommonJS {/* #commonjs */} [CommonJS](https://webpack.github.io/docs/commonjs.html) is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. -### Cordova {/* #cordova */} +## Cordova {/* #cordova */} [Apache Cordova](https://cordova.apache.org) is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. -### CORS {/* #cors */} +## CORS {/* #cors */} [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. Refer to the [CORS FAQs](../troubleshooting/cors) for more information. -### CSS Variables {/* #css-variables */} +## CSS Variables {/* #css-variables */} You may be familiar with variables from Sass. [CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. -### Decorators {/* #decorators */} +## Decorators {/* #decorators */} Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate _classes_ and _parameters_. When you decorate a **class**, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a **parameter**, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument. -### ES5 {/* #es5 */} +## ES5 {/* #es5 */} ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which developers are most familiar with today. -### ES2015/ES6 {/* #es2015-es6 */} +## ES2015/ES6 {/* #es2015-es6 */} A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 features in older browsers, tools such as [Babel](#babel) and [TypeScript](#typescript) have to [transpile](#transpiler) ES6 code down to ES5. -### ES2016/ES7 {/* #es2016-es7 */} +## ES2016/ES7 {/* #es2016-es7 */} This version of JavaScript added a number of new features to the language, including Array.includes and the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, Safari, Firefox and Edge) -### ES2017/ES8 {/* #es2017-es8 */} +## ES2017/ES8 {/* #es2017-es8 */} This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. -### Genymotion {/* #genymotion */} +## Genymotion {/* #genymotion */} Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our [resource section](../developing/tips#using-the-genymotion-android-emulator) on Genymotion for more info. -### Git {/* #git */} +## Git {/* #git */} [Git](https://git-scm.com/) is a distributed version control system for managing code. It allows development teams to contribute code to the same project without causing code conflicts. -### Gulp {/* #gulp */} +## Gulp {/* #gulp */} [Gulp](http://gulpjs.com/) is a tool for running tasks which can be used to build your app. Common build tasks include transpiling [ES6](#es2015-es6) to [ES5](#es5), turning [Sass](#sass) into CSS, minifying code, and concatenating files. -### ES Modules {/* #es-modules */} +## ES Modules {/* #es-modules */} [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the global scope and have to be explicitly imported into your project to be used. This makes it much easier to understand where your code is coming from and increases modularity and compartmentalization of functionality. -### Ionicons {/* #ionicons */} +## Ionicons {/* #ionicons */} [Ionicons](https://ionic.io/ionicons/) is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be used in any project. -### Karma {/* #karma */} +## Karma {/* #karma */} [Karma](https://karma-runner.github.io/latest/index.html) is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing framework, in a real browser. Karma was originally written for use with Angular 1. -### Module {/* #module */} +## Module {/* #module */} Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the Global scope. -### Monorepo {/* #monorepo */} +## Monorepo {/* #monorepo */} A **monorepo** is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates. -### Live Reload {/* #livereload */} +## Live Reload {/* #livereload */} **Live Reload** (or **live-reload**) is a tool that automatically reloads the browser or [Web View](../core-concepts/webview) when it detects changes in your app. In some cases, it can replace parts of your app without having to reload the entire window. Refer to the [Live Reload docs](../cli/livereload) for more information. -### Node {/* #node */} +## Node {/* #node */} [Node](https://nodejs.org/) is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web services, node is often used to build developer tools, such as the [Ionic CLI](#cli). -### npm {/* #npm */} +## npm {/* #npm */} [npm](https://www.npmjs.com/) is the package manager for [node](#node). It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies. -### Observable {/* #observable */} +## Observable {/* #observable */} An observable is an object that emits events (or notifications). An observer is an object that listens for these events, and does something when an event is received. Together, they create a pattern that can be used for programming asynchronously. -### Package ID {/* #package-id */} +## Package ID {/* #package-id */} Referred to by Apple as **Bundle ID** and by Android as **Application ID**, the **Package ID** is used for identifying apps published to the App Store/Play Store. It is a string formatted in [reverse-DNS notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation). -### Polyfill {/* #polyfill */} +## Polyfill {/* #polyfill */} A [polyfill](https://remysharp.com/2010/10/08/what-is-a-polyfill) is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a [shim](#shim), but where a shim has it's own API, a polyfill let's the expect API of the browser be used. -### Protractor {/* #protractor */} +## Protractor {/* #protractor */} [Protractor](https://angular.github.io/protractor/#/) is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. -### Sass {/* #sass */} +## Sass {/* #sass */} Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as [variables](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_), [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), and [loops](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10). -### Scoped Encapsulation {/* #scoped */} +## Scoped Encapsulation {/* #scoped */} A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a data attribute at run time. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Scoped components can also be styled using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). -### Shadow DOM {/* #shadow */} +## Shadow DOM {/* #shadow */} [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom) is a native browser solution for DOM and style encapsulation of a component. It shields the component from its surrounding environment. To externally style internal elements of a Shadow DOM component you must use [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) or [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). -### Shim {/* #shim */} +## Shim {/* #shim */} A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the browser specific implementation from the end user. -### Transpiler {/* #transpiler */} +## Transpiler {/* #transpiler */} Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of _transpilation_ in Ionic Framework is converting [ES2015/ES6](#es2015-es6) ([TypeScript](#typescript)) to [ES5](#es5) (traditional JavaScript). -### TypeScript {/* #typescript */} +## TypeScript {/* #typescript */} [TypeScript](http://www.typescriptlang.org) is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as [type declarations](http://www.typescriptlang.org/Handbook#basic-types) and [interfaces](http://www.typescriptlang.org/Handbook#interfaces). Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. -### Unit Tests {/* #unit-tests */} +## Unit Tests {/* #unit-tests */} Unit Tests and unit testing are a way to test small pieces of code to check if they behave as expected. Unit testing frameworks include Jasmine, Mocha, QUnit, and many others. -### Webpack {/* #webpack */} +## Webpack {/* #webpack */} [Webpack](https://webpack.github.io/) bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types. -### Web Standards {/* #web-standards */} +## Web Standards {/* #web-standards */} The [World Wide Web Consortium](https://www.w3.org/) (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop [web standards](https://www.w3.org/standards/), which are a set of protocols, specifications, and technologies that define the Web Platform. -### Xcode {/* #xcode */} +## Xcode {/* #xcode */} [Xcode](https://developer.apple.com/xcode/) is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions available for other languages and platforms. - -
diff --git a/package-lock.json b/package-lock.json index 05a22db75a0..0eff716f06f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,6 @@ "docusaurus-plugin-copy-page-button": "^0.8.4", "docusaurus-plugin-module-alias": "^0.0.2", "docusaurus-plugin-sass": "^0.2.6", - "fs-extra": "^11.4.0", "modern-normalize": "^3.0.1", "prism-react-renderer": "^2.4.1", "react": "^19.2.8", diff --git a/package.json b/package.json index fded68b4743..a8a705f93af 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "test": "vitest run", "typecheck": "tsc --noEmit", "swizzle": "docusaurus swizzle", - "spellcheck": "cspell --no-progress --gitignore \"**/*.{md,mdx}\"" + "spellcheck": "cspell --no-progress --cache --gitignore \"**/*.{md,mdx}\"" }, "browserslist": { "production": [ @@ -55,7 +55,6 @@ "docusaurus-plugin-copy-page-button": "^0.8.4", "docusaurus-plugin-module-alias": "^0.0.2", "docusaurus-plugin-sass": "^0.2.6", - "fs-extra": "^11.4.0", "modern-normalize": "^3.0.1", "prism-react-renderer": "^2.4.1", "react": "^19.2.8", @@ -76,5 +75,11 @@ "prettier": "^3.9.6", "typescript": "^5.9.3", "vitest": "^5.0.0" + }, + "allowScripts": { + "@parcel/watcher": false, + "@swc/core": false, + "core-js": false, + "fsevents": false } } diff --git a/scripts/release-notes.mjs b/scripts/release-notes.mjs index 7ef0b1c2184..ea549750729 100644 --- a/scripts/release-notes.mjs +++ b/scripts/release-notes.mjs @@ -1,4 +1,4 @@ -import pkg from 'fs-extra'; +import { writeFileSync } from 'fs'; import { resolve, dirname } from 'path'; import { compare } from 'semver'; import { URL, fileURLToPath } from 'url'; @@ -91,11 +91,14 @@ function getVersionType(version) { return type; } +function writeJson(data) { + writeFileSync(OUTPUT_PATH, `${JSON.stringify(data, null, 2)}\n`); +} + async function run() { - const { outputJson } = pkg; try { const releases = await getReleases(); - outputJson(OUTPUT_PATH, releases, { spaces: 2 }); + writeJson(releases); console.log(`🚀 Release Notes Generated`); } catch (error) { // Only fail the build in CI environments and the preview @@ -106,7 +109,7 @@ async function run() { process.exit(1); } console.warn(`\n⚠️ Release Notes Failed\n ⇢ ${error.message}`); - outputJson(OUTPUT_PATH, [], { spaces: 2 }); + writeJson([]); } } diff --git a/versioned_docs/version-v8/components.mdx b/versioned_docs/version-v8/components.mdx index 343d28d2e1a..371f3a42f13 100644 --- a/versioned_docs/version-v8/components.mdx +++ b/versioned_docs/version-v8/components.mdx @@ -21,8 +21,6 @@ import DocsCards from '@components/global/DocsCards'; Ionic apps are made of high-level building blocks called Components, which allow you to quickly construct the UI for your app. Ionic comes stock with a number of components, including cards, lists, and tabs. Once you're familiar with the basics, refer to the [API Index](api.mdx) for a complete list of each component and sub-component. - -

Accordions provide collapsible sections in your content to reduce vertical space while providing a way of organizing and grouping information.

diff --git a/versioned_docs/version-v8/index.mdx b/versioned_docs/version-v8/index.mdx index a78b2c99af8..5ce9cc6bb7b 100644 --- a/versioned_docs/version-v8/index.mdx +++ b/versioned_docs/version-v8/index.mdx @@ -26,8 +26,6 @@ Ionic is an open source UI toolkit for building performant, high-quality mobile Get started building by [installing Ionic](intro/cli.mdx) or following our [First App Tutorial](intro/next.mdx#build-your-first-app) to learn the main concepts. - -

Step-by-step guides to setting up your system and installing the framework.

diff --git a/versioned_docs/version-v8/native-setup.mdx b/versioned_docs/version-v8/native-setup.mdx index 03a10ea2864..149d2bd643f 100644 --- a/versioned_docs/version-v8/native-setup.mdx +++ b/versioned_docs/version-v8/native-setup.mdx @@ -22,7 +22,6 @@ import TabItem from '@theme/TabItem'; Getting started with Capacitor is fairly straight forward for Ionic developers. Adding plugins to your project is no different than adding any dependencies you may need to a project. - ## Install diff --git a/versioned_docs/version-v8/native.mdx b/versioned_docs/version-v8/native.mdx index 13818c296ad..bee4dcc9758 100644 --- a/versioned_docs/version-v8/native.mdx +++ b/versioned_docs/version-v8/native.mdx @@ -21,8 +21,6 @@ import NativeEnterpriseCard from '@components/page/native/NativeEnterpriseCard'; `} - - Add native functionality to your app with Capacitor, a native runtime built by the Ionic team. Install the core packages and easily add them to your project. Capacitor has a wide range of capabilities that developers can use to access features like the device file system, camera, and native location services. All of this is powered by a unified TypeScript API that automatically handles platform differences. While the core features of Capacitor are free and open source, some enterprises might find themselves needing more features or custom third-party integrations. If you need such additional features, check out the [Ionic Enterprise SDK](https://ionic.io/enterprise-sdk). diff --git a/versioned_docs/version-v8/reference/glossary.mdx b/versioned_docs/version-v8/reference/glossary.mdx index 2ba1a47f0e2..2c226fe86da 100644 --- a/versioned_docs/version-v8/reference/glossary.mdx +++ b/versioned_docs/version-v8/reference/glossary.mdx @@ -10,178 +10,174 @@ title: Glossary /> -
- -### Accessibility {/* #a11y */} +## Accessibility {/* #a11y */} [Accessibility](https://developer.mozilla.org/en-US/docs/Web/Accessibility) (a11y) is the practice of enabling as many people as possible to use the content, even if people have limited abilities. This includes people with disabilities, those using mobile devices, and those with slow network connections. Content should be developed to be as accessible as technology allows. -### Android SDK {/* #android-sdk */} +## Android SDK {/* #android-sdk */} The [Android SDK](http://developer.android.com/sdk/index.html) is a software development kit built for developers building for Google's Android Platform. It includes tools for building, testing, and debugging Android applications. -### Android Studio {/* #android-studio */} +## Android Studio {/* #android-studio */} [Android Studio](https://developer.android.com/studio/) is the official Integrated Development Environment (IDE) for Native Android app development. -### Autoprefixer {/* #autoprefixer */} +## Autoprefixer {/* #autoprefixer */} [Autoprefixer](https://github.com/postcss/autoprefixer) is a tool that adds vendor-specific-prefixes to hand-written Sass/CSS code. This ensures that standardized CSS rules you write will be applied across all supporting browsers. For example, instead of having to know every flexbox syntax used by various browsers, autoprefixer allows you to just write display: flex; and it'll automatically plug in the correct CSS. -### Babel {/* #babel */} +## Babel {/* #babel */} [Babel](https://babeljs.io) is a [transpiler](#transpiler) that converts modern JavaScript into a backwards-compatible version, so that syntax such as [ES2015/ES6](#es2015-es6) runs in browsers that only support [ES5](#es5). It is commonly paired with a build tool so the conversion happens automatically as part of [bundling](#bundling). -### Bundling {/* #bundling */} +## Bundling {/* #bundling */} Bundling is the process of taking an app's dependencies (code you've written plus any npm modules installed) and compiling/transpiling them down to one single file. -### Capacitor {/* #capacitor */} +## Capacitor {/* #capacitor */} [Capacitor](https://capacitorjs.com/) is an open source cross-platform app runtime that allows web-based apps to run natively on iOS, Android, Electron, and the web. It's helpful to refer to these apps "Native Progressive Web Apps" and they represent the next evolution beyond the traditional Hybrid app mentality. Capacitor was created and is actively developed/supported by Ionic, the company. {/* cspell:disable */} -### CLI {/* #cli */} +## CLI {/* #cli */} A CLI, or **C**ommand-**L**ine **I**nterface, is a text-based interface for interacting with a program. The common command-line app for a Mac user is the Terminal app, and Windows users often use Command Prompt. The Ionic community often uses this term to refer to [Ionic's CLI](https://ionicframework.com/docs/cli). Ionic's CLI can be used for a number of things, such as creating production builds of an app, running the development server, and accessing [Ionic commercial services](https://ionic.io/appflow). {/* cspell:enable */} -### CommonJS {/* #commonjs */} +## CommonJS {/* #commonjs */} [CommonJS](https://webpack.github.io/docs/commonjs.html) is a group that defines standard formats for JavaScript APIs. They have defined standards for JavaScript modules and packages. -### Cordova {/* #cordova */} +## Cordova {/* #cordova */} [Apache Cordova](https://cordova.apache.org) is an open source mobile application development framework that transforms standard HTML/CSS/JS into full-fledged native apps. It provides a JavaScript API for accessing native device functionality, such as the camera or accelerometer. Cordova contains the necessary build tools for packaging webapps for iOS, Android, and Windows Phone. -### CORS {/* #cors */} +## CORS {/* #cors */} [CORS](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross-Origin Resource Sharing) is a mechanism for servers to control client access to web assets. Refer to the [CORS FAQs](../troubleshooting/cors) for more information. -### CSS Variables {/* #css-variables */} +## CSS Variables {/* #css-variables */} You may be familiar with variables from Sass. [CSS Variables](https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care) enable the same functionality but are built into the browser. CSS Variables are available in all evergreen browsers. -### Decorators {/* #decorators */} +## Decorators {/* #decorators */} Decorators are expressions that return a function. They allow you to take an existing function, and extend its behavior. With TypeScript, you can also decorate _classes_ and _parameters_. When you decorate a **class**, you are wrapping and extending the behavior of its constructor. In other words, the decorator will add some functionality when the constructor is called, and will then return the original constructor. When you decorate a **parameter**, you are wrapping the argument that gets passed in for that parameter. The decorator will add functionality when an argument is passed to the method, and then return the original argument. -### ES5 {/* #es5 */} +## ES5 {/* #es5 */} ES5 refers to EcmaScript 5th Edition. A simple way to put it is that ES5 is the version of JavaScript which developers are most familiar with today. -### ES2015/ES6 {/* #es2015-es6 */} +## ES2015/ES6 {/* #es2015-es6 */} A wide range of new features were introduced in this version of JavaScript, including classes, modules, iterators, and promises. Evergreen browsers (Chrome, Safari, Firefox and Edge) have full support for ES6, but to use ES6 features in older browsers, tools such as [Babel](#babel) and [TypeScript](#typescript) have to [transpile](#transpiler) ES6 code down to ES5. -### ES2016/ES7 {/* #es2016-es7 */} +## ES2016/ES7 {/* #es2016-es7 */} This version of JavaScript added a number of new features to the language, including Array.includes and the exponentiation operator. This version of JavaScript is fully supported by all evergreen browsers (Chrome, Safari, Firefox and Edge) -### ES2017/ES8 {/* #es2017-es8 */} +## ES2017/ES8 {/* #es2017-es8 */} This version of JavaScript is the latest standard. It is currently in the final stage before becoming the new official standard. This spec includes Async/Await (already in all evergreen browsers) and shared memory/atomics. -### Genymotion {/* #genymotion */} +## Genymotion {/* #genymotion */} Genymotion is a third-party Android emulator. It is extremely fast, and is useful for quickly testing your app on Android. Check out our [resource section](../developing/tips#using-the-genymotion-android-emulator) on Genymotion for more info. -### Git {/* #git */} +## Git {/* #git */} [Git](https://git-scm.com/) is a distributed version control system for managing code. It allows development teams to contribute code to the same project without causing code conflicts. -### Gulp {/* #gulp */} +## Gulp {/* #gulp */} [Gulp](http://gulpjs.com/) is a tool for running tasks which can be used to build your app. Common build tasks include transpiling [ES6](#es2015-es6) to [ES5](#es5), turning [Sass](#sass) into CSS, minifying code, and concatenating files. -### ES Modules {/* #es-modules */} +## ES Modules {/* #es-modules */} [ES Modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) brings the concept of modules natively to JavaScript. With modules, classes and variables are no longer in the global scope and have to be explicitly imported into your project to be used. This makes it much easier to understand where your code is coming from and increases modularity and compartmentalization of functionality. -### Ionicons {/* #ionicons */} +## Ionicons {/* #ionicons */} [Ionicons](https://ionic.io/ionicons/) is an open-source icon set used and created by Ionic. It includes 1:1 iOS and Material Design icons, as well as commonly used social/application icons. Ionicons is included by default in Ionic distributions, but they can also be used in any project. -### Karma {/* #karma */} +## Karma {/* #karma */} [Karma](https://karma-runner.github.io/latest/index.html) is a test runner that will run an app's test inside a real browser. It executes test cases, written in any testing framework, in a real browser. Karma was originally written for use with Angular 1. -### Module {/* #module */} +## Module {/* #module */} Modules in JavaScript are small, independent, and reusable pieces or code that are isolated from one another and the Global scope. -### Monorepo {/* #monorepo */} +## Monorepo {/* #monorepo */} A **monorepo** is a single git repository with multiple projects. Advantages include simpler organization, shared tooling and dependencies, and better collaboration with teammates. -### Live Reload {/* #livereload */} +## Live Reload {/* #livereload */} **Live Reload** (or **live-reload**) is a tool that automatically reloads the browser or [Web View](../core-concepts/webview) when it detects changes in your app. In some cases, it can replace parts of your app without having to reload the entire window. Refer to the [Live Reload docs](../cli/livereload) for more information. -### Node {/* #node */} +## Node {/* #node */} [Node](https://nodejs.org/) is a runtime environment that allows JavaScript to be written on the server-side. In addition to being used for web services, node is often used to build developer tools, such as the [Ionic CLI](#cli). -### npm {/* #npm */} +## npm {/* #npm */} [npm](https://www.npmjs.com/) is the package manager for [node](#node). It allows developers to install, share, and package node modules. Ionic can be installed with npm, along with a number of its dependencies. -### Observable {/* #observable */} +## Observable {/* #observable */} An observable is an object that emits events (or notifications). An observer is an object that listens for these events, and does something when an event is received. Together, they create a pattern that can be used for programming asynchronously. -### Package ID {/* #package-id */} +## Package ID {/* #package-id */} Referred to by Apple as **Bundle ID** and by Android as **Application ID**, the **Package ID** is used for identifying apps published to the App Store/Play Store. It is a string formatted in [reverse-DNS notation](https://en.wikipedia.org/wiki/Reverse_domain_name_notation). -### Polyfill {/* #polyfill */} +## Polyfill {/* #polyfill */} A [polyfill](https://remysharp.com/2010/10/08/what-is-a-polyfill) is a bit of code that adds functionality to the browser and normalizes browser differences. This is similar to a [shim](#shim), but where a shim has it's own API, a polyfill let's the expect API of the browser be used. -### Protractor {/* #protractor */} +## Protractor {/* #protractor */} [Protractor](https://angular.github.io/protractor/#/) is a testing framework written for and by the Angular team. Protractor can be used with test runners, like Karma, for end-to-end testing. Test runners allow you to quickly and programmatically verify code quality. -### Sass {/* #sass */} +## Sass {/* #sass */} Sass is a stylesheet language that compiles to CSS and is used by Ionic. Sass is like CSS, but with extra features such as [variables](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variables_), [mixins](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins), and [loops](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_10). -### Scoped Encapsulation {/* #scoped */} +## Scoped Encapsulation {/* #scoped */} A component that uses scoped encapsulation will automatically scope its CSS by appending each of the styles with a data attribute at run time. Overriding scoped selectors in CSS requires a [higher specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) selector. Scoped components can also be styled using [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables). -### Shadow DOM {/* #shadow */} +## Shadow DOM {/* #shadow */} [Shadow DOM](https://developers.google.com/web/fundamentals/web-components/shadowdom) is a native browser solution for DOM and style encapsulation of a component. It shields the component from its surrounding environment. To externally style internal elements of a Shadow DOM component you must use [CSS Custom Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables) or [CSS Shadow Parts](https://developer.mozilla.org/en-US/docs/Web/CSS/::part). -### Shim {/* #shim */} +## Shim {/* #shim */} A shim is a piece of code that normalizes an APIs across browsers. A shim can have it's own API that hides the browser specific implementation from the end user. -### Transpiler {/* #transpiler */} +## Transpiler {/* #transpiler */} Transpilation is the process of converting code from one language to another language prior to execution. Typically, a transpiler will convert a high-level language to another high-level language. The most common type of _transpilation_ in Ionic Framework is converting [ES2015/ES6](#es2015-es6) ([TypeScript](#typescript)) to [ES5](#es5) (traditional JavaScript). -### TypeScript {/* #typescript */} +## TypeScript {/* #typescript */} [TypeScript](http://www.typescriptlang.org) is a superset of JavaScript, which means it gives you JavaScript, along with a number of extra features such as [type declarations](http://www.typescriptlang.org/Handbook#basic-types) and [interfaces](http://www.typescriptlang.org/Handbook#interfaces). Although Ionic is built with TypeScript, using it to build an Ionic app is completely optional. -### Unit Tests {/* #unit-tests */} +## Unit Tests {/* #unit-tests */} Unit Tests and unit testing are a way to test small pieces of code to check if they behave as expected. Unit testing frameworks include Jasmine, Mocha, QUnit, and many others. -### Webpack {/* #webpack */} +## Webpack {/* #webpack */} [Webpack](https://webpack.github.io/) bundles together JavaScript modules and other assets. It can be used to create single or multiple "chunks" that are only loaded when needed. Webpack can be used to take many files and dependencies and bundle them into one file, or other types. -### Web Standards {/* #web-standards */} +## Web Standards {/* #web-standards */} The [World Wide Web Consortium](https://www.w3.org/) (W3C) is the standards organization for the Web. Together, industry leaders and the public work together to develop [web standards](https://www.w3.org/standards/), which are a set of protocols, specifications, and technologies that define the Web Platform. -### Xcode {/* #xcode */} +## Xcode {/* #xcode */} [Xcode](https://developer.apple.com/xcode/) is an Apple IDE (integrated development environment) for software development on Apple operating systems (macOS, iOS, watchOS and tvOS), with extensions available for other languages and platforms. - -