### Install Puter.js SDK
Source: https://github.com/heyputer/puter.js/blob/main/README.md
This snippet provides the necessary shell commands to clone the Puter.js repository from GitHub, navigate into its directory, and install all required project dependencies using npm.
```Shell
git clone https://github.com/HeyPuter/puter.js.git
cd puter.js
npm install
```
--------------------------------
### Run Puter.js Development Server
Source: https://github.com/heyputer/puter.js/blob/main/README.md
Execute this npm command to start the local development server for Puter.js. This server is essential for testing your applications and examples during development.
```Shell
npm start
```
--------------------------------
### Migrating Puter.js UI Function Calls
Source: https://github.com/heyputer/puter.js/blob/main/app-migration-guide.txt
Updates the `puter.showOpenFilePicker` pattern to `puter.ui.showOpenFilePicker`, standardizing UI function calls under the `puter.ui` namespace.
```APIDOC
Old: puter.showOpenFilePicker
New: puter.ui.showOpenFilePicker
```
--------------------------------
### Migrating Puter.js Router Module to Hosting
Source: https://github.com/heyputer/puter.js/blob/main/app-migration-guide.txt
Renames the `puter.router` module to `puter.hosting` to better reflect its purpose related to application hosting functionalities.
```APIDOC
Old: puter.router.*
New: puter.hosting.*
```
--------------------------------
### Migrating Puter.js CloudItem Instantiation
Source: https://github.com/heyputer/puter.js/blob/main/app-migration-guide.txt
Changes the `puter.createCloudItem(...)` factory function to direct instantiation using `new puter.CloudItem(...)` for creating cloud item objects.
```APIDOC
Old: puter.createCloudItem(...)
New: new puter.CloudItem(...)
```
--------------------------------
### Integrate Puter.js and Use AI Chat in HTML
Source: https://github.com/heyputer/puter.js/blob/main/README.md
This example demonstrates how to include the Puter.js SDK in a basic HTML page. It then shows how to use the SDK's AI capabilities to perform a chat interaction, specifically with GPT-3.5 Turbo, and print the response to the console.
```HTML
```
--------------------------------
### Migrating Puter.js Module Namespaces (FileSystem, Router, Apps)
Source: https://github.com/heyputer/puter.js/blob/main/app-migration-guide.txt
Renames top-level module accessors like `puter.FileSystem` to `puter.fs`, `puter.Router` to `puter.router`, and `puter.Apps` to `puter.apps` for consistency and brevity.
```APIDOC
Old: puter.FileSystem.
New: puter.fs.
Old: puter.Router.
New: puter.router.
Old: puter.Apps.
New: puter.apps.
```
--------------------------------
### Migrating Puter.js Key-Value Store Functions
Source: https://github.com/heyputer/puter.js/blob/main/app-migration-guide.txt
Updates direct `puter.setItem`, `puter.getItem`, `puter.removeItem` calls to use the new `puter.kv` namespace, specifically `puter.kv.set`, `puter.kv.get`, and `puter.kv.del` for key-value store operations.
```APIDOC
Old: puter.setItem
New: puter.kv.set
Old: puter.getItem
New: puter.kv.get
Old: puter.removeItem
New: puter.kv.del
```
--------------------------------
### Build Puter.js Project for Production
Source: https://github.com/heyputer/puter.js/blob/main/README.md
This command initiates the build process for the Puter.js project. It compiles and bundles the code, preparing it for optimized production deployment.
```Shell
npm run build
```
--------------------------------
### Initialize Test Runner and Define Helper Functions
Source: https://github.com/heyputer/puter.js/blob/main/test/run.html
Attaches an event listener to execute code when the DOM is fully loaded. It defines global helper functions `pass`, `fail`, and `assert` for test result reporting and assertion checking.
```javascript
document.addEventListener("DOMContentLoaded", () => {
window.pass = function(msg) { // $('#tests').append(`
${msg}
`); }
window.fail = function(msg) { throw new Error(msg); }
window.assert = function(condition, message) {
if (!condition) {
throw new Error(message || "Assertion failed");
}
}
```
--------------------------------
### Execute Selected File System and Key Value Tests
Source: https://github.com/heyputer/puter.js/blob/main/test/run.html
Asynchronously iterates through selected file system and key-value tests. It executes each checked test, updates the test container's background color based on success or failure, and displays error messages for failed tests.
```javascript
async function runTests() {
// go through fsTests and run each test
for (let i = 0; i < fsTests.length; i++) {
if (document.getElementById(`fsTests${i}`).checked) {
try{
await fsTests[i]();
// make this test's container green
$(`#fsTests-container-${i}`).css('background-color', '#85e085');
} catch (e) {
console.log(e);
// make this test's container red
$(`#fsTests-container-${i}`).css('background-color', '#ffbfbf');
// message
$(`#fsTests-container-${i}`).append(`
${e}
`);
}
}
}
for (let i = 0; i < kvTests.length; i++) {
if (document.getElementById(`kvTests${i}`).checked) {
try{
await kvTests[i]();
// make this test's container green
$(`#kvTests-container-${i}`).css('background-color', '#85e085');
} catch (e) {
// make this test's container red
$(`#kvTests-container-${i}`).css('background-color', '#ff8484');
// message
$(`#kvTests-container-${i}`).append(`
${e}
`);
}
}
}
}
```
--------------------------------
### Render File System and Key Value Test Checkboxes
Source: https://github.com/heyputer/puter.js/blob/main/test/run.html
Dynamically appends HTML elements to the '#tests' container, creating checkboxes and labels for each test found in the `fsTests` and `kvTests` arrays, allowing individual test selection.
```javascript
// print the test name with checkbox for each test
$('#tests').append('
File System Tests
');
for (let i = 0; i < fsTests.length; i++) {
$('#tests').append(`
`);
}
$('#tests').append('
Key Value Tests
');
for (let i = 0; i < kvTests.length; i++) {
$('#tests').append(`
`);
}
```
--------------------------------
### CSS Styling for Test Runner UI
Source: https://github.com/heyputer/puter.js/blob/main/test/run.html
Defines styles for the test runner's HTML elements, including margins, colors, and button appearance, to structure the test display and controls.
```css
#tests { margin-top: 20px; } #run-tests { margin-top: 20px; margin-bottom: 20px; background-color: #4c84af; border: none; color: white; padding: 10px 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; cursor: pointer; } #unselect-all { margin-left: 20px; cursor: pointer; } #select-all { margin-left: 20px; cursor: pointer; } .test-container{ margin-bottom: 10px; padding: 10px; border-radius: 5px; }
```
--------------------------------
### Attach Event Listeners for Test Runner Controls
Source: https://github.com/heyputer/puter.js/blob/main/test/run.html
Assigns click event handlers to the 'Run Tests', 'Unselect All', and 'Select All' buttons. These handlers trigger the `runTests` function or modify the checked state of all test checkboxes.
```javascript
$('#run-tests').click(() => {
runTests();
});
$('#unselect-all').click(() => {
for (let i = 0; i < fsTests.length; i++) {
$('.test-checkbox').prop('checked', false);
}
});
$('#select-all').click(() => {
for (let i = 0; i < fsTests.length; i++) {
$('.test-checkbox').prop('checked', true);
}
});
});
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.